fix: cannot hook at beforeUnmount/unmounted (#524)

closes #523

Author: kazupon

packages/vue-i18n/src/mixin.ts

@@ -1,4 +1,4 @@
-import { getCurrentInstance } from 'vue'
+import { getCurrentInstance, nextTick } from 'vue'
 import { getLocaleMessages, SetPluralRulesSymbol } from './composer'
 import { createVueI18n } from './legacy'
 import { createI18nError, I18nErrorCodes } from './errors'
@@ -100,34 +100,36 @@ export function defineMixin(
       }
     },
 
-    beforeUnmount(): void {
+    unmounted(): void {
       const instance = getCurrentInstance()
       /* istanbul ignore if */
       if (!instance) {
         throw createI18nError(I18nErrorCodes.UNEXPECTED_ERROR)
       }
 
-      /* istanbul ignore if */
-      if ((__DEV__ || __FEATURE_PROD_VUE_DEVTOOLS__) && !__NODE_JS__) {
-        if (this.__v_emitter) {
-          this.__v_emitter.off('*', addTimelineEvent)
-          delete this.__v_emitter
+      nextTick(() => {
+        /* istanbul ignore if */
+        if ((__DEV__ || __FEATURE_PROD_VUE_DEVTOOLS__) && !__NODE_JS__) {
+          if (this.__v_emitter) {
+            this.__v_emitter.off('*', addTimelineEvent)
+            delete this.__v_emitter
+          }
+          const _vueI18n = (this.$i18n as unknown) as VueI18nInternal
+          _vueI18n.__disableEmitter && _vueI18n.__disableEmitter()
+          delete this.$el.__VUE_I18N__
         }
-        const _vueI18n = (this.$i18n as unknown) as VueI18nInternal
-        _vueI18n.__disableEmitter && _vueI18n.__disableEmitter()
-        delete this.$el.__VUE_I18N__
-      }
 
-      delete this.$t
-      delete this.$rt
-      delete this.$tc
-      delete this.$te
-      delete this.$d
-      delete this.$n
-      delete this.$tm
+        delete this.$t
+        delete this.$rt
+        delete this.$tc
+        delete this.$te
+        delete this.$d
+        delete this.$n
+        delete this.$tm
 
-      i18n.__deleteInstance(instance)
-      delete this.$i18n
+        i18n.__deleteInstance(instance)
+        delete this.$i18n
+      })
     }
   }
 }

packages/vue-i18n/test/i18n.test.ts

@@ -424,7 +424,19 @@ describe('slot reactivity', () => {
             <i18n-t keypath='hello'/>
           </SlotChild>
         </div>
-      `
+      `,
+      created() {
+        // @ts-ignore
+        console.log('child created $t', this.$t)
+      },
+      beforeUnmount() {
+        // @ts-ignore
+        console.log('child beforeUnmount $t', this.$t)
+      },
+      unmounted() {
+        // @ts-ignore
+        console.log('child unmounted $t', this.$t)
+      }
     }
 
     const App = defineComponent({