title: Vuex this.$store is undefined in child component
body: <p>I am trying to make simple Vuex app and here are my files:</p>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>/* eslint-disable no-unused-vars */
  // The Vue build version to load with the `import` command
  // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
  import Vue from 'vue'
  import Vuex from 'vuex'
  import App from './App'
  import router from './router'
  import BootstrapVue from 'bootstrap-vue'
  
  // TODO make it work with css-loader, dunno why it's not working at my environment
  import '../node_modules/bootstrap/dist/css/bootstrap.css'
  import '../node_modules/bootstrap-vue/dist/bootstrap-vue.css'
  
  Vue.use(BootstrapVue)
  
  Vue.config.productionTip = false
  
  Vue.use(Vuex)
  
  const store = new Vuex.Store({
    state: {
      isLogged: false
    },
    mutations: {
      logIn (state) {
        state.isLogged = true
      },
      logOut (state) {
        state.isLogged = false
      }
    }
  })
  
  store.commit('logIn')
  console.log('main', store.state.isLogged)
  
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    store,
    router,
    components: { App },
    template: '&lt;App/&gt;'
  })
  </code></pre>
  
  <p><strong>App.vue</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;b-container&gt;
      &lt;b-row align-h="center"&gt;
        &lt;b-col cols="4"&gt;
          &lt;div id="app"&gt;
            &lt;router-view/&gt;
          &lt;/div&gt;
        &lt;/b-col&gt;
      &lt;/b-row&gt;
    &lt;/b-container&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  // import store from './store'
  // store.commit('logOut')
  console.log('app', this.$store)
  export default {
    // name: 'App'
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>Also I'm using vue-router:</p>
  
  <pre><code>import Vue from 'vue'
  import Router from 'vue-router'
  import Home from '@/components/Home'
  import Login from '@/components/Login'
  
  Vue.use(Router)
  
  export default new Router({
    mode: 'history',
    routes: [
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        path: '/login',
        name: 'Login',
        component: Login
      }
    ]
  })
  </code></pre>
  
  <p>And after initializing the store in the <strong>main.js</strong> and injecting in the <strong>App.vue</strong> component the <strong>this.$store</strong> variable in App.vue is undefined; but at the same time in main.js all is okay.</p>
  
  <p>Also trying to import the store from the App.vue (later I stored store in store/index.js) make new store, without changed state in main.js.</p>