fix(nav-link): opt-out of vue reactivity for component binding (#3113)

Co-authored-by: David Kagiri <[email protected]>

Author: sean-perkins

static/usage/v6/nav/nav-link/vue/example_vue.md

@@ -4,14 +4,15 @@
 </template>
 
 <script lang="ts">
+  import { markRaw } from 'vue';
   import { IonNav } from '@ionic/vue';
   import PageOne from './PageOne.vue';
 
   export default {
     components: { IonNav },
     data() {
       return {
-        component: PageOne,
+        component: markRaw(PageOne),
       };
     },
   };

static/usage/v6/nav/nav-link/vue/page_one_vue.md

@@ -14,14 +14,15 @@
 </template>
 
 <script lang="ts">
+  import { markRaw } from 'vue';
   import { IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton } from '@ionic/vue';
   import PageTwo from './PageTwo.vue';
 
   export default {
     components: { IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton },
     data() {
       return {
-        component: PageTwo,
+        component: markRaw(PageTwo),
       };
     },
   };

static/usage/v6/nav/nav-link/vue/page_two_vue.md

@@ -17,6 +17,7 @@
 </template>
 
 <script lang="ts">
+  import { markRaw } from 'vue';
   import {
     IonHeader,
     IonTitle,
@@ -42,7 +43,7 @@
     },
     data() {
       return {
-        component: PageThree,
+        component: markRaw(PageThree),
       };
     },
   };

static/usage/v7/nav/nav-link/vue/example_vue.md

@@ -4,14 +4,15 @@
 </template>
 
 <script lang="ts">
+  import { markRaw } from 'vue';
   import { IonNav } from '@ionic/vue';
   import PageOne from './PageOne.vue';
 
   export default {
     components: { IonNav },
     data() {
       return {
-        component: PageOne,
+        component: markRaw(PageOne),
       };
     },
   };

static/usage/v7/nav/nav-link/vue/page_one_vue.md

@@ -14,14 +14,15 @@
 </template>
 
 <script lang="ts">
+  import { markRaw } from 'vue';
   import { IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton } from '@ionic/vue';
   import PageTwo from './PageTwo.vue';
 
   export default {
     components: { IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton },
     data() {
       return {
-        component: PageTwo,
+        component: markRaw(PageTwo),
       };
     },
   };

static/usage/v7/nav/nav-link/vue/page_two_vue.md

@@ -17,6 +17,7 @@
 </template>
 
 <script lang="ts">
+  import { markRaw } from 'vue';
   import {
     IonHeader,
     IonTitle,
@@ -42,7 +43,7 @@
     },
     data() {
       return {
-        component: PageThree,
+        component: markRaw(PageThree),
       };
     },
   };