title: Pass data from Rails template to Vue Instance
body: <p>I've been trying to pass data from my Rails view to the Vue component as described <a href="https://github.com/rails/webpacker#vue-1" rel="nofollow noreferrer">here</a></p>
  
  <p>Everything works much as expected, but I'm rather stumped as to how to access the data that I'm passing in via props. Not appearing in the Vue developer tools anywhere and I'm not able to find it by fiddling with/inside the Vue object.</p>
  
  <p>Could someone point me in the right direction.  I'm fairly green with Vue, so struggling to even know what to search for :/</p>
  
  <p><strong>show.html.erb</strong></p>
  
  <pre><code>&lt;%= javascript_pack_tag 'test_vue' %&gt;
  &lt;%= stylesheet_pack_tag 'test_vue' %&gt;
  &lt;%= content_tag :div, id: "test", data: {
                            message: "this wont!",
                            name: "nor will this!" }.to_json do %&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p><strong>test.vue</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;p&gt;{{test}}{{message}}{{name}}&lt;/p&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      data: function () {
        return {
            test: 'This will display',
        }
      }
    }
  &lt;/script&gt;
  
  &lt;style&gt;
  &lt;/style&gt;
  </code></pre>
  
  <p><strong>test_vue.js</strong></p>
  
  <pre><code>import Vue from 'vue'
  import Test from './test.vue'
  document.addEventListener('DOMContentLoaded', () =&gt; {
    const node = document.getElementById('test')
    const props = JSON.parse(node.getAttribute('data'))
    new Vue({
        render: h =&gt; h(Test, { props })
    }).$mount('#test');
  })
  </code></pre>