title: vue-i18n + storybook - Why are my translations not working?
body: <p>i'm using vue, vuei18n and storybook but i'm having problems with translations showing. </p>
  
  <p>storybook loads up fine with my custom webpack config. translations are stored in each component's i18n tags via a .json file. </p>
  
  <p>i'm using the following webpack config rules:</p>
  
  <pre><code>        test: /\.scss$/,
          loaders: ["style-loader", "css-loader", "sass-loader"],
          include: path.resolve(__dirname, "../"),
      }, {
          test: /\.html$/,
          loaders: ["html-loader"],
          include: path.resolve(__dirname, "../"),
      }, {
          resourceQuery: /blockType=i18n/,
          type: "javascript/auto",
          loader: "@kazupon/vue-i18n-loader",
      });
  </code></pre>
  
  <p>stories are typically loaded like so: </p>
  
  <pre><code>storiesOf("MyComponent", module)
      .add("MyComponent opened", () =&gt; ({
          components: { MyComponent },
          template: '&lt;v-app&gt;&lt;my-component&gt;&lt;/my-component&gt;&lt;/v-app&gt;',
          i18n,
          store,
          created() {
              store.dispatch("myComponent/openWith", null);
          },
      }))
  </code></pre>
  
  <p>i'm also using vue-loader 15.7.1, storybook 5.2.1.</p>
  
  <p>When components load I get the following warning on browser console:</p>
  
  <pre><code>[vue-i18n] Cannot translate the value of keypath 'translation.value'. Use the value of keypath as default
  </code></pre>
  
  <p>This is because the $i18n.locale is set to "en-US", even though I've defined it in the story as it loads. If I insert a created() method which sets locale to "en" the translations work fine. Why is this happening?</p>