watchEffect not triggered sometimes when ref mutation happens inside onMounted

[xinchao-zhang]

Version

3.1.0-beta.3

Reproduction link

reproduce at SFC Playground

Steps to reproduce

Open the included SFC Playground reproduce link, and open the browser dev tool console to check the log

What the code does:

1. The App renders a Parent component.
2. The Parent conditionally renders a Child once the "showChild" flag is toggled (async toggled after one second).
3. The Child component defines a ref (initialized), and registers a watchEffect for it. The ref is set when the Child component is mounted through onMounted hook.

What is expected?

On the console I am expecting to see watchEffect in the Child component to be triggered twice: once immediately, and once when the initialized ref is set. Specifically, I am expecting to see

watchEffect triggered with initialized = true

at the end of the console log

What is actually happening?

watchEffect in the Child is NOT triggered when the initialized is set inside onMounted. Console log indicates watchEffect is only triggered once:

setting state.showChild
watchEffect triggered with initialized = undefined
Child onMounted

[HcySunYang]

Hint: the root cause is that when jobs in PostFlushCbs are executed, the new pre-flush job may still be queued to PreFlushCbs. This issue may have the same reason as #2730