title: Vue-i18n - Issue with dynamic localizations from http request
body: <p>I m trying to load the localization from HTTP call as i want the languages to be dynamic and manageable, rather than shipping it with the application.</p>
  
  <p>I did a work around using the SSR sample and some of my own implementation. But on the initial render the language does not loading. When changing the route client-side things are getting updated.</p>
  
  <p><strong>i18n.js</strong></p>
  
  <pre><code>import Vue from 'vue'
  import VueI18n from 'vue-i18n'
  import en from './en.json'
  import ar from './ar.json'
  import axios from 'axios'
  
  Vue.use(VueI18n)
  
  const fallbackLocale = 'en'
  let defaultLocale = 'ar'
  
  export const i18n = new VueI18n({
    locale: defaultLocale, // set locale
    fallbackLocale: fallbackLocale,
    messages: {
      'en': en
    }
  })
  
  export function createI18n () {
    return i18n
  }
  </code></pre>
  
  <p><strong>Router - router.beforeEach</strong></p>
  
  <pre><code>router.beforeEach((to, from, next) =&gt; {
      if (router.app.$store) {
          router.app.$store
            .dispatch('getI18nData')
            .then(function(){
              router.app.$i18n.setLocaleMessage('ar',router.app.$store.getters.getLocale)
              return next()
            })
            .catch(() =&gt; console.log('getI18nData-error'))
        } else {
          next()
        }
    })
  </code></pre>
  
  <p><strong>Store Action - to fetch locale</strong></p>
  
  <pre><code>getI18nData ({ commit }) {
     try {
       axios.get('http://localhost:8080/lang?lang=ar')
      .then(function (response) {
        let locale = response.data
        commit('setLocale', { locale })
      })
      .catch(function (error) {
        console.log('Error:getI18nData')
      })
     } catch (error) {
       console.error(error);
     }
   }
  </code></pre>
  
  <p><strong>Findings:</strong>
  i18n is initializing before <code>router.beforeEach</code> where it should initialize after <code>router.beforeEach</code>.</p>
  
  <p><a href="https://github.com/kazupon/vue-i18n/issues/372" rel="nofollow noreferrer">Github Issue Link</a> </p>