title: vue, vuex, vue-i18n change language button event
body: <p>Why changing mutation do not update page in new language?</p>
  
  <p>main.js : here I implemented vue-i18n with vue:</p>
  
  <pre><code>import Vue from 'vue'
  import VueRouter from 'vue-router'
  import VueResource from 'vue-resource'
  import VueI18n from 'vue-i18n'
  
  import locales from './locales'
  import router from './router'
  import store from './store'
  
  import App from './App'
  
  Vue.use(VueRouter)
  Vue.use(VueResource)
  Vue.use(VueI18n, store)
  
  Vue.http.interceptors.push((request, next) =&gt; {
    console.log('sending request: ', request)
    next(response =&gt; {
      console.log('response: ', response)
    })
  })
  
  Vue.config.debug = true
  
  Vue.config.lang = 'fa'
  
  Object.keys(locales).forEach(lang =&gt; {
    Vue.locale(lang, locales[lang])
  })
  
  const app = new Vue({
    el: '#app',
    router,
    VueI18n,
    store,
    render: h =&gt; h(App)
  })
  
  app.$mount('#app')
  </code></pre>
  
  <p>App.vue: Then used two buttons to change language:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;h2&gt;{{ $t('example', '@store.state.culture') }}&lt;/h2&gt;
      &lt;p&gt;{{ count }}&lt;/p&gt;
      &lt;p&gt;
        &lt;button @click="increment()"&gt;+&lt;/button&gt;
        &lt;button @click="decrement()"&gt;-&lt;/button&gt;
      &lt;/p&gt;
  
      &lt;p&gt;culture: {{ culture }}&lt;/p&gt;
      &lt;p&gt;
        &lt;button @click=' changeCulture("en") '&gt;English&lt;/button&gt;
        &lt;button @click=' changeCulture("fa") '&gt;پارسی&lt;/button&gt;
      &lt;/p&gt;
  
      &lt;input type="text" v-model="newUserName"&gt;
      &lt;button @click="handleAddUserButton()"&gt;add&lt;/button&gt;
      &lt;div&gt;
        &lt;router-link to="/page1"&gt;Go to page1&lt;/router-link&gt;
        &lt;router-link to="/page2"&gt;Go to page2&lt;/router-link&gt;
      &lt;/div&gt;
      &lt;transition name="fade" mode="out-in"&gt;
        &lt;keep-alive&gt;
          &lt;router-view&gt;&lt;/router-view&gt;
        &lt;/keep-alive&gt;
      &lt;/transition&gt;
      &lt;img src="./assets/logo.png"&gt;
      &lt;hello&gt;&lt;/hello&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { mapGetters, mapActions } from 'vuex'
  // import App from './main.js'
  
  import Hello from 'components/Hello'
  
  export default {
    name: 'app',
  
    components: {
      Hello
    },
  
    data () {
      return {
        newUserName: ''
      }
    },
  
    computed: {
      ...mapGetters([
        'count',
        'culture'
      ])
    },
  
    methods: {
      ...mapActions([
        'increment',
        'decrement',
        'exampleGetFirebaseData',
        'examplePostFirebaseData',
        'changeCulture'
      ]),
      handleAddUserButton () {
        const user = {
          name: this.newUserName
        }
        this.examplePostFirebaseData(user)
          .then(resp =&gt; {
            // console.log('resp: ', resp)
          })
          .catch(error =&gt; {
            console.log('catch error: ', error)
          })
      },
      handleError () {
  
      }
    },
    beforeMount () {
      this.exampleGetFirebaseData()
        .then(resp =&gt; {
          // console.log('resp: ', resp)
        })
        .catch(error =&gt; {
          this.handleError(error)
          // console.log('catch error: ', error)
        })
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>sotre > culture.js: Then using store, getters, actions and mutation to change langauge,</p>
  
  <pre><code>const state = {
    locales: ['en', 'fa'],
    culture: 'en'
  }
  
  const getters = {
    culture: state =&gt; state.culture
  }
  
  const actions = {
    async changeCulture ({ commit }, playload) {
      commit('CHANGE', playload)
    }
  }
  
  import App from '../../main.js'
  const mutations = {
    CHANGE (state, payload) {
      if (state.locales.indexOf(payload) !== -1) {
        state.culture = payload
      } else state.culture = 'en'
      console.log(App.i18n)
    }
  }
  
  export default {
    state,
    getters,
    actions,
    mutations
  }
  </code></pre>
  
  <p>I checked using vue development tools in chrome and culture is changed but the problem is that title of {{ $t("example")}} do not change as mutation change.
  I know doubt something basic is wrong in my code, may you please help.
  Many Thanks in advance.</p>