title: Can't read from Vuex store in Storybook
body: <p>I'm using Storybook with <code>vue create</code>, and I'm trying to read state from the store but I'm getting the following error: </p>
  
  <pre><code>Cannot read property 'state' of undefined
  TypeError: Cannot read property 'state' of undefined
      at VueComponent.translations (http://localhost:6006/main.08c5b1c8a108e2d2d34c.bundle.js:161:26)
      at Watcher.get (http://localhost:6006/vendors~main.08c5b1c8a108e2d2d34c.bundle.js:86420:25)
      at Watcher.evaluate (http://localhost:6006/vendors~main.08c5b1c8a108e2d2d34c.bundle.js:86525:21)
      at VueComponent.computedGetter [as translations] (http://localhost:6006/vendors~main.08c5b1c8a108e2d2d34c.bundle.js:86775:17)
      at Object.get (http://localhost:6006/vendors~main.08c5b1c8a108e2d2d34c.bundle.js:84041:20)
      at Proxy.render (http://localhost:6006/main.08c5b1c8a108e2d2d34c.bundle.js:895:37)
      at VueComponent.Vue._render (http://localhost:6006/vendors~main.08c5b1c8a108e2d2d34c.bundle.js:85489:22)
      at VueComponent.updateComponent (http://localhost:6006/vendors~main.08c5b1c8a108e2d2d34c.bundle.js:86007:21)
      at Watcher.get (http://localhost:6006/vendors~main.08c5b1c8a108e2d2d34c.bundle.js:86420:25)
      at new Watcher (http://localhost:6006/vendors~main.08c5b1c8a108e2d2d34c.bundle.js:86409:12)
  </code></pre>
  
  <p>My <code>HotDescription</code> component looks like: </p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="hot-description"&gt;
          &lt;SvgIcon iconId="icon-hot" class="icon-hot"/&gt;
          &lt;span&gt;{{translations.ui.hotMessage}}&lt;/span&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  export default {
      name: 'HotDescription',
      computed: {
          translations() {
              return this.$store.state.translations
          }
      }
  }
  &lt;/script&gt;
  
  &lt;style scoped lang="scss"&gt;
  
  .hot-description {
      font-size: 14px;
      color: $hot-description-color;
      padding: 2%;
      border-top: 1px solid $hot-description-border-color;
      text-align: center;
  }
  
  .icon-hot {
      width: 14px;
      height: 14px;
      margin: 0 3px 3px;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>Inside <code>.storybook</code> I have two files:</p>
  
  <p><code>main.js</code>:</p>
  
  <pre><code>const path = require('path');
  
  module.exports = {
    stories: ['../stories/**/*.stories.js'],
    addons: ['@storybook/addon-actions', '@storybook/addon-links'],
    webpackFinal: async (config, { configType }) =&gt; {
      // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
      // You can change the configuration based on that.
      // 'PRODUCTION' is used when building the static version of storybook.
  
      // Make whatever fine-grained changes you need
      config.module.rules.push({
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 
          {
            loader: 'sass-loader',
            options: {
              prependData: `@import "src/project/betpawa/vars.scss"; @import "src/project/common/mixins.scss"; @import "src/styles/styles.scss";`
            }
          }
      ],
        include: path.resolve(__dirname, '../'),
      });
  
      // Return the altered config
      return config;
    },
  };
  </code></pre>
  
  <p>And <code>preview.js</code>:</p>
  
  <pre><code>import { configure } from '@storybook/vue';
  
  import Vue from 'vue';
  import Vuex from 'vuex';
  
  // Import your global components.
  import HotDescription from '../src/components/HotDescription.vue';
  
  // Install Vue plugins.
  Vue.use(Vuex);
  
  // Register global components.
  Vue.component('HotDescription', HotDescription);
  
  configure(require.context('../stories', true, /\.stories\.js$/), module);
  </code></pre>
  
  <p>And then the stories (<code>stories/1-Button.stories.js</code>):</p>
  
  <pre><code>import Test from '../src/components/Test'
  import HotDescription from '../src/components/HotDescription'
  
  export default {
      title: 'Button',
      component: Test
  }
  
  export const C = () =&gt; ({
      components: { HotDescription },
      template: '&lt;HotDescription /&gt;'
  })
  </code></pre>
  
  <p>It's mounted in <code>src/main.js</code>:</p>
  
  <pre><code>// 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 store from './store/store'
  import './js/directives'
  import './js/plugins'
  import './js/globalComponents'
  import './js/android'
  import './js/filters'
  import './js/polyfills'
  
  Vue.config.productionTip = false
  Vue.use(Vuex)
  
  const app = new Vue({
      el: '#app',
      store,
      router,
      components: { App },
      template: '&lt;App/&gt;',
      mq: {
          isSmallest: '(max-width: 220px)',
          isVerySmall: '(max-width: 280px)',
          isXXSmall: '(max-width: 340px)',
          isXSmall: '(max-width: 380px)',
          isSmall: '(max-width: 767px)',
          isMedium: '(min-width: 768px)',
          isLarge: '(min-width: 980px)',
          isHighRes: '(-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)' // , (min-resolution: 192dpi)
      }
  })
  
  export default app
  </code></pre>
  
  <p>Any ideas what I'm doing wrong?</p>
  
  <p>Storybook itself loads up, and components work without state, it's just anything that requires vuex doesn't work...</p>