fix: composer instance keeping

Author: kazupon

packages/vue-i18n-core/src/devtools.ts

@@ -61,12 +61,8 @@ export async function enableDevTools(app: App, i18n: _I18n): Promise<boolean> {
           })
 
           api.on.inspectComponent(({ componentInstance, instanceData }) => {
-            if (
-              componentInstance.vnode.el &&
-              componentInstance.vnode.el.__VUE_I18N__ &&
-              instanceData
-            ) {
-              inspectComposer(instanceData, componentInstance.vnode.el.__VUE_I18N__ as Composer)
+            if (componentInstance.__VUE_I18N__ && instanceData) {
+              inspectComposer(instanceData, componentInstance.__VUE_I18N__ as Composer)
             }
           })
 
@@ -138,9 +134,9 @@ function updateComponentTreeTags(
 ): void {
   // prettier-ignore
   const global = i18n.global
-  if (instance && instance.vnode.el && instance.vnode.el.__VUE_I18N__) {
+  if (instance && instance.__VUE_I18N__) {
     // add custom tags local scope only
-    if (instance.vnode.el.__VUE_I18N__ !== global) {
+    if (instance.__VUE_I18N__ !== global) {
       const tag = {
         label: `i18n (${getI18nScopeLable(instance)} Scope)`,
         textColor: 0x000000,

packages/vue-i18n-core/src/i18n.ts

@@ -637,10 +637,8 @@ function setupLifeCycle(
   // eslint-disable-next-line vue-composable/lifecycle-placement -- NOTE(kazupon): not Vue component
   onMounted(() => {
     // inject composer instance to DOM for intlify-devtools
-    // @ts-expect-error -- TODO(kazupon): need to fix types
-    if ((__DEV__ || __FEATURE_PROD_VUE_DEVTOOLS__) && !__NODE_JS__ && target.vnode.el) {
-      // @ts-expect-error -- TODO(kazupon): need to fix types
-      target.vnode.el.__VUE_I18N__ = composer
+    if ((__DEV__ || __FEATURE_PROD_VUE_DEVTOOLS__) && !__NODE_JS__) {
+      target.__VUE_I18N__ = composer
       emitter = createEmitter<VueDevToolsEmitterEvents>()
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const _composer = composer as any
@@ -655,18 +653,10 @@ function setupLifeCycle(
     const _composer = composer as any
 
     // remove composer instance from DOM for intlify-devtools
-    if (
-      (__DEV__ || __FEATURE_PROD_VUE_DEVTOOLS__) &&
-      !__NODE_JS__ &&
-      // @ts-expect-error -- TODO(kazupon): need to fix types
-      target.vnode.el &&
-      // @ts-expect-error -- TODO(kazupon): need to fix types
-      target.vnode.el.__VUE_I18N__
-    ) {
+    if ((__DEV__ || __FEATURE_PROD_VUE_DEVTOOLS__) && !__NODE_JS__ && target.__VUE_I18N__) {
       emitter && emitter.off('*', addTimelineEvent)
       _composer[DisableEmitter] && _composer[DisableEmitter]()
-      // @ts-expect-error -- TODO(kazupon): need to fix types
-      delete target.vnode.el.__VUE_I18N__
+      delete target.__VUE_I18N__
     }
     i18n.__deleteInstance(target)
 

packages/vue-i18n-core/src/vue.d.ts

@@ -1,4 +1,5 @@
 import type { InjectionKey } from 'vue'
+import type { Composer } from './composer'
 import type { I18n, I18nInternal } from './i18n'
 
 declare module 'vue' {
@@ -17,6 +18,11 @@ declare module 'vue' {
      * whether target component is custom element
      */
     isCE?: boolean
+    /**
+     * @internal
+     * for vue/devtools i18n composer hook
+     */
+    __VUE_I18N__?: Composer
   }
 
   export interface GenericComponentInstance {
@@ -25,5 +31,10 @@ declare module 'vue' {
      * whether target component is custom element
      */
     isCE?: boolean
+    /**
+     * @internal
+     * for vue/devtools i18n composer hook
+     */
+    __VUE_I18N__?: Composer
   }
 }