title: Vuejs and Webpack: Why is store undefined in child components
body: <p>I am using Vuejs with Webpack.</p>
  
  <p>Here's store.js:</p>
  
  <pre><code>import Vuex from "vuex";
  
  export default new Vuex.Store({
      state: {
          count : 0
      },
      mutations: {
          increment (state) {
              state.count++
          }
      }
  });
  </code></pre>
  
  <p>Here is my app.js:</p>
  
  <pre><code>"use strict";
  
  import Vue from 'vue';
  
  window.Vue = Vue;
  import MyComponent from './MyComponent.vue';
  import store from './store.js';
  
  window.App = new Vue({
      el : '#my-app',
      store,
      components : {
          'my-component' : MyComponent
      }
  });
  </code></pre>
  
  <p>Here is the script from MyComponent.vue:</p>
  
  <pre><code>export default {
      computed : {
          count() {
              return this.$store.state.count;
          }
      },
      mounted() {
          console.log(this.$store)
      }
  }
  </code></pre>
  
  <p>Any reference to <code>this.$store</code> in my component is undefined.  Why?</p>