title: Why does the language load only after reloading the page? i18n
body: <p>When you first start the application, the application language should be installed on the system. But this only works when the page is reload. How to make the language load the first time?</p>
  
  <pre><code>&lt;template&gt;
  ...
               &lt;f7-menu-dropdown-item href="#" @click="setLocale('en')"&gt;
               &lt;f7-menu-dropdown-item href="#" @click="setLocale('ru')"&gt;    
  ...
  &lt;/template&gt;
  
      export default {
      methods: {
          setLocale(locale){
            import(`../langs/${locale}.json`).then((msgs) =&gt; {
              this.$i18n.setLocaleMessage(locale, msgs)
              this.$i18n.locale = locale
              localStorage.setItem('language', locale);
        })
      },
  
  //Before creating, I check if there is any value in localStore and if not, then I install the system language.
          beforeCreate(){   
            if(localStorage.getItem('language') === null){
          let lng = window.navigator.systemLanguage || window.navigator.language;
          lng = lng.substr(0, 2).toLowerCase();
          localStorage.setItem('language', lng);
   }
         }
  
      }
      }
      }
  </code></pre>
  
  <p><strong>i18n</strong></p>
  
  <pre><code>import Vue from 'vue'
  import VueI18n from 'vue-i18n'
  import en from '../langs/en.json'
  import ru from '../langs/ru.json'
  Vue.use(VueI18n)
  
  export const i18n = new VueI18n({
      locale: window.localStorage.getItem("language"),
      fallbackLocale: 'en',
      messages:{
          en,
          ru
      }
  })
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/lDUOR.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lDUOR.gif" alt="enter image description here"></a></p>