From 763858b8035db54f3330e88230a323d2a527eb18 Mon Sep 17 00:00:00 2001
From: "J.c" <Jak-Ch-ll@mailbox.org>
Date: Thu, 15 Aug 2024 12:09:40 +0200
Subject: [PATCH] fix(runtime): handle errors for computed watch keys

---
 .../__tests__/errorHandling.spec.ts           | 37 +++++++++++++++++++
 packages/runtime-core/src/apiWatch.ts         |  5 ++-
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/packages/runtime-core/__tests__/errorHandling.spec.ts b/packages/runtime-core/__tests__/errorHandling.spec.ts
index 4cf4ffe3126..0cd3efa588c 100644
--- a/packages/runtime-core/__tests__/errorHandling.spec.ts
+++ b/packages/runtime-core/__tests__/errorHandling.spec.ts
@@ -670,5 +670,42 @@ describe('error handling', () => {
     )
   })
 
+  // #11624
+  test('in computed that is used as key for watch', async () => {
+    const err = new Error('foo')
+    const fn = vi.fn()
+    const trigger = ref(false)
+
+    const Comp = {
+      setup() {
+        onErrorCaptured((err, instance, info) => {
+          fn(err, info)
+          return false
+        })
+        return () => h(Child)
+      },
+    }
+
+    const Child = {
+      setup() {
+        const foo = computed(() => {
+          if (trigger.value) throw err
+          return 1
+        })
+        watch(foo, () => {})
+        return () => null
+      },
+    }
+
+    render(h(Comp), nodeOps.createElement('div'))
+
+    trigger.value = true
+    await nextTick()
+    expect(fn).toHaveBeenCalledWith(
+      err,
+      ErrorTypeStrings[ErrorCodes.COMPONENT_UPDATE],
+    )
+  })
+
   // native event handler handling should be tested in respective renderers
 })
diff --git a/packages/runtime-core/src/apiWatch.ts b/packages/runtime-core/src/apiWatch.ts
index 479a263b39b..35b488052f9 100644
--- a/packages/runtime-core/src/apiWatch.ts
+++ b/packages/runtime-core/src/apiWatch.ts
@@ -400,7 +400,10 @@ function doWatch(
   } else {
     // default: 'pre'
     job.flags! |= SchedulerJobFlags.PRE
-    if (instance) job.id = instance.uid
+    if (instance) {
+      job.id = instance.uid
+      job.i = instance
+    }
     scheduler = () => queueJob(job)
   }
   effect.scheduler = scheduler