fix: sync watch request in useAsyncData #33189

Tofandel · Tofandel · commit c4a84815810d · 2025-09-10T14:42:07.000+02:00
diff --git a/packages/nuxt/src/app/composables/asyncData.ts b/packages/nuxt/src/app/composables/asyncData.ts
@@ -322,7 +322,7 @@ export function useAsyncData<
 
     // setup watchers/instance
     const hasScope = getCurrentScope()
-    const unsubExecute = watch([key, ...(options.watch || [])], ([newKey], [oldKey]) => {
+    const unsubKeyWatcher = watch(key, (newKey, oldKey) => {
       if ((newKey || oldKey) && newKey !== oldKey) {
         const hasRun = nuxtApp._asyncData[oldKey]?.data.value !== undefined
         const isRunning = nuxtApp._asyncDataPromises[oldKey] !== undefined
@@ -345,14 +345,19 @@ export function useAsyncData<
         if (options.immediate || hasRun || isRunning) {
           nuxtApp._asyncData[newKey].execute(initialFetchOptions)
         }
-      } else {
-        asyncData._execute({ cause: 'watch', dedupe: options.dedupe })
       }
     }, { flush: 'sync' })
 
+    const unsubWatcher = options.watch
+      ? watch(options.watch, () => {
+          asyncData._execute({ cause: 'watch', dedupe: options.dedupe })
+        })
+      : () => {}
+
     if (hasScope) {
       onScopeDispose(() => {
-        unsubExecute()
+        unsubKeyWatcher()
+        unsubWatcher()
         unregister(key.value)
       })
     }
diff --git a/test/nuxt/use-async-data.test.ts b/test/nuxt/use-async-data.test.ts
@@ -356,6 +356,55 @@ describe('useAsyncData', () => {
     expect(promiseFn).toHaveBeenCalledTimes(1)
   })
 
+  it('should watch params deeply in a non synchronous way', async () => {
+    const foo = ref('foo')
+    const baz = ref('baz')
+    const locale = ref('en')
+    const params = reactive({ deep: { baz: 'baz' } })
+    const requestHistory = reactive([])
+    watch(foo, (foo) => {
+      params.foo = foo
+      params.locale = locale.value
+    }, { immediate: true })
+    watch(baz, (baz) => {
+      params.deep.baz = baz
+    }, { immediate: true })
+    await useAsyncData(uniqueKey, async () => {
+      requestHistory.push(JSON.parse(JSON.stringify(params)))
+      await promiseFn()
+    }, { watch: params })
+    foo.value = 'bar'
+    locale.value = 'fr'
+    // We need to wait for the debounce 0
+    await (new Promise(resolve => setTimeout(resolve, 5)))
+    baz.value = 'bar'
+    await nextTick()
+
+    expect(requestHistory).toEqual([
+      {
+        deep: {
+          baz: 'baz',
+        },
+        foo: 'foo',
+        locale: 'en',
+      },
+      {
+        deep: {
+          baz: 'baz',
+        },
+        foo: 'bar',
+        locale: 'fr',
+      },
+      {
+        deep: {
+          baz: 'bar',
+        },
+        foo: 'bar',
+        locale: 'fr',
+      },
+    ])
+  })
+
   it('should execute the promise function multiple times when dedupe option is not specified for multiple calls', () => {
     const promiseFn = vi.fn(() => Promise.resolve('test'))
     useAsyncData(uniqueKey, promiseFn)
