diff --git a/static/usage/v6/nav/nav-link/vue/example_vue.md b/static/usage/v6/nav/nav-link/vue/example_vue.md
index ec054a80749..0d1bb74fb60 100644
--- a/static/usage/v6/nav/nav-link/vue/example_vue.md
+++ b/static/usage/v6/nav/nav-link/vue/example_vue.md
@@ -4,6 +4,7 @@
 </template>
 
 <script lang="ts">
+  import { markRaw } from 'vue';
   import { IonNav } from '@ionic/vue';
   import PageOne from './PageOne.vue';
 
@@ -11,7 +12,7 @@
     components: { IonNav },
     data() {
       return {
-        component: PageOne,
+        component: markRaw(PageOne),
       };
     },
   };
diff --git a/static/usage/v6/nav/nav-link/vue/page_one_vue.md b/static/usage/v6/nav/nav-link/vue/page_one_vue.md
index f3635e1db37..6597688ea05 100644
--- a/static/usage/v6/nav/nav-link/vue/page_one_vue.md
+++ b/static/usage/v6/nav/nav-link/vue/page_one_vue.md
@@ -14,6 +14,7 @@
 </template>
 
 <script lang="ts">
+  import { markRaw } from 'vue';
   import { IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton } from '@ionic/vue';
   import PageTwo from './PageTwo.vue';
 
@@ -21,7 +22,7 @@
     components: { IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton },
     data() {
       return {
-        component: PageTwo,
+        component: markRaw(PageTwo),
       };
     },
   };
diff --git a/static/usage/v6/nav/nav-link/vue/page_two_vue.md b/static/usage/v6/nav/nav-link/vue/page_two_vue.md
index 0d736d69c88..ceb17385968 100644
--- a/static/usage/v6/nav/nav-link/vue/page_two_vue.md
+++ b/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),
       };
     },
   };
diff --git a/static/usage/v7/nav/nav-link/vue/example_vue.md b/static/usage/v7/nav/nav-link/vue/example_vue.md
index ec054a80749..0d1bb74fb60 100644
--- a/static/usage/v7/nav/nav-link/vue/example_vue.md
+++ b/static/usage/v7/nav/nav-link/vue/example_vue.md
@@ -4,6 +4,7 @@
 </template>
 
 <script lang="ts">
+  import { markRaw } from 'vue';
   import { IonNav } from '@ionic/vue';
   import PageOne from './PageOne.vue';
 
@@ -11,7 +12,7 @@
     components: { IonNav },
     data() {
       return {
-        component: PageOne,
+        component: markRaw(PageOne),
       };
     },
   };
diff --git a/static/usage/v7/nav/nav-link/vue/page_one_vue.md b/static/usage/v7/nav/nav-link/vue/page_one_vue.md
index f3635e1db37..6597688ea05 100644
--- a/static/usage/v7/nav/nav-link/vue/page_one_vue.md
+++ b/static/usage/v7/nav/nav-link/vue/page_one_vue.md
@@ -14,6 +14,7 @@
 </template>
 
 <script lang="ts">
+  import { markRaw } from 'vue';
   import { IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton } from '@ionic/vue';
   import PageTwo from './PageTwo.vue';
 
@@ -21,7 +22,7 @@
     components: { IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton },
     data() {
       return {
-        component: PageTwo,
+        component: markRaw(PageTwo),
       };
     },
   };
diff --git a/static/usage/v7/nav/nav-link/vue/page_two_vue.md b/static/usage/v7/nav/nav-link/vue/page_two_vue.md
index 0d736d69c88..ceb17385968 100644
--- a/static/usage/v7/nav/nav-link/vue/page_two_vue.md
+++ b/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),
       };
     },
   };