title: Vue-i18n undefined in vuex
body: <p>I'm trying to implement a locale update using Vue, Vuex and VueI18n. I thought i found the way to update the locale setting the i18n value in the store object and then using it like this (mutation):</p>
  
  <pre class="lang-js prettyprint-override"><code>    UPDATE_LANGUAGE: (state, newLanguage) =&gt; {
        state.language = newLanguage;
        this.$i18n.locale = state.language;
      }
  </code></pre>
  
  <p>But surprisingly doesn't work... it says this.$i18n is not defined, but it is. </p>
  
  <p><a href="https://i.stack.imgur.com/iCI46.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iCI46.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/3HuKw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3HuKw.png" alt="enter image description here"></a>
  Any thoughts??</p>
  
  <pre class="lang-js prettyprint-override"><code>import store from "./store";
  import EnMessages from "@/messages/en.json";
  import EsMessages from "@/messages/es.json";
  
  const i18n = new VueI18n(Vue, {
    es: EsMessages,
    en: EnMessages
  });
  
  i18n.locale = store.state.language;
  store.$i18n = i18n;
  
  Vue.http.interceptors.push((request, next) =&gt; {
    //internacionalizacion en todas las urls
    request.url = `${request.url}?lang=${store.getters["getLanguage"]}`;
  
    //token en todas las urls
    request.headers.set("token", store.getters["getToken"]);
  
    next();
  });
  
  new Vue({
    i18n,
    router,
    store,
    render: h =&gt; h(App)
  }).$mount("#app");
  </code></pre>