fix(nuxt): don't overwrite existing scope in runWithContext (#26976)

packages/nuxt/src/app/composables/asyncData.ts

@@ -378,9 +378,7 @@ export function useAsyncData<
     const hasScope = getCurrentScope()
     if (options.watch) {
       const unsub = watch(options.watch, () => asyncData.refresh())
-      if (instance) {
-        onUnmounted(unsub)
-      } else if (hasScope) {
+      if (hasScope) {
         onScopeDispose(unsub)
       }
     }
@@ -389,9 +387,7 @@ export function useAsyncData<
         await asyncData.refresh()
       }
     })
-    if (instance) {
-      onUnmounted(off)
-    } else if (hasScope) {
+    if (hasScope) {
       onScopeDispose(off)
     }
   }

packages/nuxt/src/app/nuxt.ts

@@ -1,4 +1,4 @@
-import { effectScope, getCurrentInstance, hasInjectionContext, reactive } from 'vue'
+import { effectScope, getCurrentInstance, getCurrentScope, hasInjectionContext, reactive } from 'vue'
 import type { App, EffectScope, Ref, VNode, onErrorCaptured } from 'vue'
 import type { RouteLocationNormalizedLoaded } from '#vue-router'
 import type { HookCallback, Hookable } from 'hookable'
@@ -255,7 +255,7 @@ export function createNuxtApp (options: CreateOptions) {
       data: {},
     },
     runWithContext (fn: any) {
-      if (nuxtApp._scope.active) {
+      if (nuxtApp._scope.active && !getCurrentScope()) {
         return nuxtApp._scope.run(() => callWithNuxt(nuxtApp, fn))
       }
       return callWithNuxt(nuxtApp, fn)

test/basic.test.ts

@@ -2605,3 +2605,13 @@ describe('lazy import components', () => {
     expect(html).toContain('lazy-named-comp-server')
   })
 })
+
+describe('defineNuxtComponent watch duplicate', () => {
+  it('test after navigation duplicate', async () => {
+    const { page } = await renderPage('/define-nuxt-component')
+    await page.getByTestId('define-nuxt-component-bar').click()
+    await page.getByTestId('define-nuxt-component-state').click()
+    await page.getByTestId('define-nuxt-component-foo').click()
+    expect(await page.getByTestId('define-nuxt-component-state').first().innerText()).toBe('2')
+  })
+})

test/fixtures/basic/pages/define-nuxt-component/index.vue

@@ -0,0 +1,29 @@
+<script lang="ts">
+export default defineNuxtComponent({
+  name: 'DefineNuxtComponentTest',
+  setup () {
+    const router = useRouter()
+
+    return {
+      router,
+    }
+  },
+})
+</script>
+
+<template>
+  <div>
+    <div
+      data-testid="define-nuxt-component-bar"
+      @click="router.push('/define-nuxt-component/nested/bar')"
+    >
+      Open bar
+    </div>
+    <div
+      data-testid="define-nuxt-component-foo"
+      @click="router.push('/define-nuxt-component/nested/foo')"
+    >
+      Open foo
+    </div>
+  </div>
+</template>

test/fixtures/basic/pages/define-nuxt-component/nested/[foo].vue

@@ -0,0 +1,34 @@
+<script lang="ts">
+export default defineNuxtComponent({
+  name: 'DefineNuxtComponentTest',
+  setup () {
+    const state = useState('define-nuxt-component-counter', () => 0)
+    const watcher = useState('define-nuxt-component-watcher', () => 0)
+    const router = useRouter()
+
+    // Should trigger once per page on state change
+    watch(state, () => {
+      watcher.value++
+    })
+
+    state.value++
+
+    return {
+      state,
+      watcher,
+      router,
+    }
+  },
+})
+</script>
+
+<template>
+  <div>
+    <div
+      data-testid="define-nuxt-component-state"
+      @click="router.push('/define-nuxt-component')"
+    >
+      {{ watcher }}
+    </div>
+  </div>
+</template>