fix(watch): pre-flush watcher watching props should trigger before component update

fix #1763

packages/runtime-core/src/renderer.ts

@@ -40,7 +40,8 @@ import {
   queueJob,
   queuePostFlushCb,
   flushPostFlushCbs,
-  invalidateJob
+  invalidateJob,
+  runPreflushJobs
 } from './scheduler'
 import { effect, stop, ReactiveEffectOptions, isRef } from '@vue/reactivity'
 import { updateProps } from './componentProps'
@@ -1429,6 +1430,7 @@ function baseCreateRenderer(
     instance.next = null
     updateProps(instance, nextVNode.props, prevProps, optimized)
     updateSlots(instance, nextVNode.children)
+    runPreflushJobs()
   }
 
   const patchChildren: PatchChildrenFn = (

packages/runtime-core/src/scheduler.ts

@@ -26,6 +26,7 @@ let isFlushPending = false
 let flushIndex = 0
 let pendingPostFlushCbs: Function[] | null = null
 let pendingPostFlushIndex = 0
+let hasPendingPreFlushJobs = false
 
 const RECURSION_LIMIT = 100
 type CountMap = Map<SchedulerJob | Function, number>
@@ -47,6 +48,7 @@ export function queueJob(job: SchedulerJob) {
     !queue.includes(job, job.cb ? flushIndex + 1 : flushIndex)
   ) {
     queue.push(job)
+    if ((job.id as number) < 0) hasPendingPreFlushJobs = true
     queueFlush()
   }
 }
@@ -58,6 +60,19 @@ export function invalidateJob(job: SchedulerJob) {
   }
 }
 
+export function runPreflushJobs() {
+  if (hasPendingPreFlushJobs) {
+    hasPendingPreFlushJobs = false
+    for (let job, i = queue.length - 1; i > flushIndex; i--) {
+      job = queue[i]
+      if (job && (job.id as number) < 0) {
+        job()
+        queue[i] = null
+      }
+    }
+  }
+}
+
 export function queuePostFlushCb(cb: Function | Function[]) {
   if (!isArray(cb)) {
     if (