title: How can I pass data from .js to .vue?
body: <p>I am trying to load data into my .vue component file from its parent .js file.</p>
  
  <p>This is my .html file:</p>
  
  <pre><code>&lt;div class="modal-container"&gt;
      &lt;section class="modal"&gt;
          &lt;modal-component&gt;&lt;/modal-component&gt;
      &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my .js file:</p>
  
  <pre><code>var modal = new Vue({
      el: 'section.modal',
      data: {
          msg: 'Hello world!'
      },
      components: {
          'modal-component': httpVueLoader('./templates/test.vue')
      }
  });
  </code></pre>
  
  <p>This is my .vue file:</p>
  
  <pre><code>&lt;template&gt;
      &lt;section&gt;               
          &lt;p class="test"&gt;{{ msg }}&lt;/p&gt;
      &lt;/section&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>However, when I load the page, this error appears in the console and the value of 'msg' is blank:</p>
  
  <pre><code>[Vue warn]: Property or method "msg" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
  </code></pre>