fix(watch): handle errors in computed used as watch source (#11626)

close #11624

Author: jak-ch-ll

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
 })

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