fix: recursive clone triggered when "locales" object made reactive

Ensure that we always clone the original "locales" when assigning to
"$i18n.locales" so that if the object is made reactive by the user, we
don't attempt to clone that.

Resolves #1075

src/templates/plugin.main.js

@@ -275,7 +275,7 @@ export default async (context) => {
   }
 
   const extendVueI18nInstance = i18n => {
-    i18n.locales = locales
+    i18n.locales = klona(locales)
     i18n.localeProperties = klona(locales.find(l => l[LOCALE_CODE_KEY] === i18n.locale) || { code: i18n.locale })
     i18n.defaultLocale = defaultLocale
     i18n.differentDomains = differentDomains

test/browser.test.js

@@ -18,7 +18,7 @@ async function createBrowser () {
 async function navigate (page, path) {
   await page.evaluate(path => {
     return new Promise((resolve, reject) => {
-      window.$nuxt.$router.push(path, () => resolve(), reject)
+      window.$nuxt.$router.push(path, () => resolve(null), reject)
     })
   }, path)
   await new Promise(resolve => setTimeout(resolve, 50))

test/fixture/basic/pages/index.vue

@@ -8,6 +8,7 @@
 </template>
 
 <script>
+import Vue from 'vue'
 import LangSwitcher from '../components/LangSwitcher'
 
 export default {
@@ -19,6 +20,11 @@ export default {
       ...this.$nuxtI18nHead({ addDirAttribute: false }),
       title: this.$t('home')
     }
+  },
+  created () {
+    // This tests the case where klona tries to clone reactive object instead of an original one.
+    // https://github.com/nuxt-community/i18n-module/issues/1075
+    Vue.observable(this.$i18n.locales)
   }
 }
 </script>