Почему язык загружается только после перезагрузки страницы?i18n

Question

При первом запуске приложения язык приложения должен быть установлен в системе. Но это работает только при перезагрузке страницы. Как заставить язык загружаться с первого раза?

<template>
...
             <f7-menu-dropdown-item href="#" @click="setLocale('en')">
             <f7-menu-dropdown-item href="#" @click="setLocale('ru')">    
...
</template>

    export default {
    methods: {
        setLocale(locale){
          import(`../langs/${locale}.json`).then((msgs) => {
            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);
 }
       }

    }
    }
    }

i18n

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
    }
})