fix(vue): fix type issues with IonNav

Author: christian-bromann

packages/vue/src/components/IonNav.ts

@@ -4,8 +4,24 @@ import { defineComponent, h, shallowRef } from "vue";
 
 import { VueDelegate } from "../framework-delegate";
 
-export const IonNav = /*@__PURE__*/ defineComponent(
-  (props) => {
+export const IonNav = /*@__PURE__*/ defineComponent({
+  name: "IonNav",
+  /**
+   * The default values follow what is defined at
+   * https://ionicframework.com/docs/api/nav#properties
+   * otherwise the default values on the Web Component
+   * may be overridden. For example, if the default animated value
+   * is not `true` below, then Vue would default the prop to `false`
+   * which would override the Web Component default of `true`.
+   */
+  props: {
+    animated: Boolean,
+    animation: Function,
+    root: [Function, Object, String],
+    rootParams: Object,
+    swipeGesture: Boolean,
+  },
+  setup(props) {
     defineCustomElement();
     const views = shallowRef([]);
 
@@ -23,37 +39,4 @@ export const IonNav = /*@__PURE__*/ defineComponent(
       return h("ion-nav", { ...props, delegate }, views.value);
     };
   },
-  {
-    name: "IonNav",
-    /**
-     * The default values follow what is defined at
-     * https://ionicframework.com/docs/api/nav#properties
-     * otherwise the default values on the Web Component
-     * may be overridden. For example, if the default animated value
-     * is not `true` below, then Vue would default the prop to `false`
-     * which would override the Web Component default of `true`.
-     */
-    props: {
-      animated: {
-        type: Boolean,
-        default: true,
-      },
-      animation: {
-        type: Function,
-        default: undefined,
-      },
-      root: {
-        type: [Function, Object, String],
-        default: undefined,
-      },
-      rootParams: {
-        type: Object,
-        default: undefined,
-      },
-      swipeGesture: {
-        type: Boolean,
-        default: undefined,
-      },
-    },
-  }
-);
+});