Can't access $store when importing Vuex instance from an external file
<p>I'm creating a <a href="https://github.com/guytepper/vuex-counter" rel="noreferrer">counter using Vue &amp; Vuex 2</a>.<br>
When trying to access the count property on the store object, using <code>this.$store.state.count</code>, I get an <code>Cannot read property 'state' of undefined</code> error. </p>

<p>The error <strong>doesn't</strong> show up and everything works just fine when I'm creating the store instance inside <code>main.js</code>, instead of importing it.</p>

<p><strong>main.js</strong></p>

<pre><code>import Vue from 'vue'
import Vuex from 'Vuex'
import App from './App.vue'
import store from './store'

new Vue({
  el: '#app',
  store,
  render: h =&gt; h(App)
})
</code></pre>

<p><strong>store.js</strong>  </p>

<pre><code>import Vue from 'Vue'
import Vuex from 'Vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 1
  }
});
</code></pre>

<p><strong>Counter.vue</strong></p>

<pre><code>export default {
  name: 'counter',
  template: `&lt;span&gt;{{ count }}&lt;/span&gt;`,
  computed: {
    count () {
        return this.$store.state.count
    }
  },
}
</code></pre>

<p>Any idea what's wrong with the store import? </p>