diff --git a/packages/nuxt/src/pages/runtime/plugins/router.ts b/packages/nuxt/src/pages/runtime/plugins/router.ts
index e39e33d890..9f8bf65667 100644
--- a/packages/nuxt/src/pages/runtime/plugins/router.ts
+++ b/packages/nuxt/src/pages/runtime/plugins/router.ts
@@ -1,4 +1,4 @@
-import { isReadonly, reactive, shallowReactive, shallowRef } from 'vue'
+import { isReadonly, reactive, shallowReactive, shallowRef, toValue } from 'vue'
 import type { Ref } from 'vue'
 import type { RouteLocation, Router, RouterScrollBehavior } from '#vue-router'
 import {
@@ -99,11 +99,15 @@ const plugin: Plugin<{ router: Router }> = defineNuxtPlugin({
     const _route = shallowRef(router.resolve(initialURL) as RouteLocation)
     const syncCurrentRoute = () => { _route.value = router.currentRoute.value }
     nuxtApp.hook('page:finish', syncCurrentRoute)
+ 
     router.afterEach((to, from) => {
       // We won't trigger suspense if the component is reused between routes
       // so we need to update the route manually
       if (to.matched[0]?.components?.default === from.matched[0]?.components?.default) {
         syncCurrentRoute()
+      } else {
+        // assign toValue to avoid reactivity
+        Object.assign(toValue(_route), router.currentRoute.value) 
       }
     })