fix(vue): ion-nav now handles Vue components properly (#22197)

resolves #22184

packages/vue/src/components/IonNav.ts

@@ -0,0 +1,16 @@
+import { defineComponent, h } from 'vue';
+import { VueDelegate } from '../framework-delegate';
+
+export const IonNav = defineComponent({
+  name: 'IonNav',
+  setup(_, { slots }) {
+    const delegate = VueDelegate();
+    return () => {
+      return h(
+        'ion-nav',
+        { delegate },
+        slots
+      )
+    }
+  }
+});

packages/vue/src/framework-delegate.ts

@@ -18,6 +18,8 @@ export const VueDelegate = () => {
     parentElement.appendChild(div);
 
     render(vueInstance, div);
+
+    return div;
   }
 
   const removeViewFromDom = (_: HTMLElement, childElement: any) => {

packages/vue/src/index.ts

@@ -10,6 +10,7 @@ export { IonRouterOutlet } from './components/IonRouterOutlet';
 export { IonTabButton } from './components/IonTabButton';
 export { IonTabs } from './components/IonTabs';
 export { IonTabBar } from './components/IonTabBar';
+export { IonNav } from './components/IonNav';
 export { IonIcon } from './components/IonIcon';
 export * from './components/Overlays';