vue.js - Rails Vuejs Webpacker: Passing instance variable data -

i trying learn how build app rails 5.1 vuejs, generated via webpacker gem.

$ rails new myvueapp --webpack=vue 

how pass instance variable data forth between vue components, data in/out of database?

let's example have user model username , email fields. there simple example of how pass instance variable, @user, data controller component?

i believe there 2 ways this:

(1) in controller, has render :json => @user , use fetch api or axios retrieve data in .vue component.

-or-

(2) use example <%= javascript_pack_tag 'hello_vue' %> <%= content_tag ... %> in view.

when <%= javascript_pack_tag 'hello_vue' %> example, can see "hello vue!" data in component "message" variable, having trouble finding example of instance variable data, eg: @user data, being passed in , out of rails.

any examples of how pass @user data appreciated.

thank you.

i'm not 100% sure trying accomplish, can think of 2 ways this.

1. use v-model on form. whatever value retrieved or updated usable in vue instance. (e.g. <%= f.input :username, input_html: { 'v-model': 'username' } %>

2. use data attributes. let's have controller has @user variable.

then in view, (this may not 100% correct memory):

<% simple_form_for @user |f| %>   <%= f.input :username, input_html: { id: 'user_username', data: { username: @user.username } } %>   <%= f.input :email, input_html: { id: 'user_email', data: { email: @user.email } } %> <% end %> 

then can use javascript access data attributes. in these examples since both forms, preferable use v-model, use data attributes non-form stuff. example, use data attributes uri used in ajax request may differ test site production etc.