Change nuxt-i18n locale with cookie on site load

Question

I've two locale; "fa" and "en" with fa being default. I've tried to change it with the following code block both on nuxtServerInit and fetch hook of layout but it still revert back to my default locale and gives me json.parse error on route change.

// using "nuxt": "^2.15.8" , "@nuxtjs/i18n": "^7.2.0" , "@nuxtjs/universal-storage": "^0.5.9" , "@nuxtjs/vuetify": "^1.12.3"
async fetch(){
  let locale = this.$storage.getCookie('localeLang')
  if(!!locale){
      await this.$i18n.setLocale(locale)
      this.$vuetify.rtl = this.$i18n.localeProperties.dir === 'rtl'
      this.$storage.setCookie('localeLang', locale, {maxAge: 315360000})
  }
}

When using in fetch hook i can see for a moment that it's in en then revert back to fa . but the htmlAttr of meta are set according to en locale (which has been set on cookie)

So what should I do? Any idea?

// nuxt.config.js
i18n: {
    baseURL: process.env.DEFAULT_BASE_URL,
    locales:[
      {
        code: 'fa', 
        iso: 'fa-IR', 
        file: 'fa.js', 
        currency: {name:'تومان', sign:'ت'}, 
        dir: 'rtl', 
        name: 'فارسی', 
        initial: 'FA',
      },
      {
        code: 'en', 
        iso: 'en-US', 
        file: 'en.js', 
        currency: {name:'Dollar', sign:'$'}, 
        dir: 'ltr', 
        name: 'English', 
        initial: 'EN',
      },
    ],
    defaultLocale: 'fa',
    strategy: 'no_prefix',
    lazy: true,
    langDir: '~/locale/lang/',
    detectBrowserLanguage: false,
    // vueI18n: '~/plugins/vue-i18n.js',
},