title: How do I pass data from Vue Instance to a Single File Component
body: <p>I've been working with Vue for sometime, but I've never really tried working with Single File Components alongside webpack. Here's the problem I'm having. I have 2 files: main.js (which contains the Vue root instance) and App.vue (which is a single file component. The code in each file goes as thus:</p>
  
  <p>main.js:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import Vue from 'vue'
  import App from './App.vue'
  
  new Vue({
    el: '#app',
    components: { App, },
    data(){
      return {
          greeting: "Hello World!",
       }
    },
    render: h =&gt; h(App),
  
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>App.vue: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;div id="app"&gt;
      {{greeting}}
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'App',
    
    }
    
   &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Please note that I'm using webpack, and the main.js file is meant to be an entry point. The code is bundled to a file called bundle.js. </p>
  
  <p>Now, my problem is that, when the template in App.vue renders, it doesn't show "Hello Word", which is the value of {{greeting}}. I expect that data passed from the root Vue instance in main.js should be available to the App.vue component.</p>
  
  <p>The {{greeting}} isn't evaluated when I put it in my index.html file, which links to bundle.js (the bundled version of main.js)</p>
  
  <p>index.html:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Nothing&lt;/title&gt;
      &lt;script src="/dist/build.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="app"&gt;&lt;/div&gt;
        {{greeting}}
  
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Does this mean that data in the root vue instance isn't available anywhere? What should I do?</p>