fix(vue): components inside of ion-nav are now unmounted properly (#23240)

resolves #23233

packages/vue/src/components/IonApp.ts

@@ -18,7 +18,7 @@ export const IonApp = defineComponent({
 
 /**
  * When rendering user components inside of
- * ion-modal, ion-popover, or ion-nav, the component
+ * ion-modal, or ion-popover the component
  * needs to be created inside of the current application
  * context otherwise libraries such as vue-i18n or vuex
  * will not work properly.

packages/vue/src/components/IonNav.ts

@@ -1,15 +1,24 @@
-import { defineComponent, h } from 'vue';
+import { defineComponent, h, shallowRef, VNode } from 'vue';
 import { VueDelegate } from '../framework-delegate';
 
 export const IonNav = defineComponent({
   name: 'IonNav',
-  setup(_, { slots }) {
+  setup() {
-    const delegate = VueDelegate();
+    const views = shallowRef([]);
+
+    /**
+     * Allows us to create the component
+     * within the Vue application context.
+     */
+    const addView = (component: VNode) => views.value = [...views.value, component];
+    const removeView = (component: VNode) => views.value = views.value.filter(cmp => cmp !== component);
+
+    const delegate = VueDelegate(addView, removeView);
     return () => {
       return h(
         'ion-nav',
         { delegate },
-        slots
+        views.value
       )
     }
   }

packages/vue/src/framework-delegate.ts

@@ -1,6 +1,6 @@
 import { h, Teleport, VNode } from 'vue';
 import { addTeleportedUserComponent, removeTeleportedUserComponent } from './components/IonApp';
-export const VueDelegate = () => {
+export const VueDelegate = (addFn = addTeleportedUserComponent, removeFn = removeTeleportedUserComponent) => {
   let Component: VNode | undefined;
   const attachViewToDom = (parentElement: HTMLElement, component: any, componentProps: any = {}, classes?: string[]) => {
     /**
@@ -22,13 +22,13 @@ export const VueDelegate = () => {
       h(component, { ...componentProps })
     );
 
-    addTeleportedUserComponent(Component);
+    addFn(Component);
 
     return div;
   }
 
   const removeViewFromDom = () => {
-    Component && removeTeleportedUserComponent(Component);
+    Component && removeFn(Component);
     return Promise.resolve();
   }