fix(reactivity): ensure watch(Effect) can run independent of unmounted instance if created in a detatched effectScope (fix #7319)

packages/runtime-core/__tests__/apiWatch.spec.ts

@@ -1150,4 +1150,37 @@ describe('api: watch', () => {
     // own update effect
     expect(instance!.scope.effects.length).toBe(1)
   })
+
+  test('watchEffect should keep running if created in a detatched scope', async () => {
+    const trigger = ref(0)
+    let count = 0
+    const Comp = {
+      setup() {
+        effectScope(true).run(() => {
+          watchEffect(
+            () => {
+              trigger.value
+              count++
+            },
+          )
+          watch(
+            trigger,
+            () => count++
+          )
+        })
+        return () => ''
+      }
+    }
+    const root = nodeOps.createElement('div')
+    render(h(Comp), root)
+    expect(count).toBe(1) // only watchEffect as ran so far
+    trigger.value++
+    await nextTick()
+    expect(count).toBe(3) // both watchers run while component is mounted
+    render(null, root)
+    await nextTick()
+    trigger.value++
+    await nextTick()
+    expect(count).toBe(5) // both watchers run again event though component has been unmounted
+  })
 })

packages/runtime-core/src/apiWatch.ts

@@ -7,7 +7,8 @@ import {
   isReactive,
   ReactiveFlags,
   EffectScheduler,
-  DebuggerOptions
+  DebuggerOptions,
+  getCurrentScope,
 } from '@vue/reactivity'
 import { SchedulerJob, queueJob } from './scheduler'
 import {
@@ -197,7 +198,8 @@ function doWatch(
     )
   }
 
-  const instance = currentInstance
+  const instance = getCurrentScope() === currentInstance?.scope ?  currentInstance : null
+  // const instance = currentInstance
   let getter: () => any
   let forceTrigger = false
   let isMultiSource = false