Vue3.5のwatchやライフサイクルフックの実行タイミング

はじめに

Vueのライフサイクルフックが呼ばれる順番はここで案内されている。
https://ja.vuejs.org/guide/essentials/lifecycle.html

watchは即時ウォッチャーと
https://ja.vuejs.org/guide/essentials/watchers.html#eager-watchers

遅延ウォッチャーなどがある。
https://ja.vuejs.org/guide/essentials/watchers.html#post-watchers

これらの実行タイミングは明記されていない。
Vue Playgroundで試してみた。

結論

まとめるとこう。

コンポーネントがインスタンス化される（v-ifがtrueになるなど）
↓
watch { immediate: true }（flushの値は関係ない）
↓
onBeforeMount
↓
onMounted
↓
refの値を変更する
↓
watch: { flush: "sync" }
↓
watch: { flush: "pre" }（デフォルトの挙動）
↓
onBeforeUpdate
↓
watch: { flush: "post" }
↓
onUpdated

おわりに

onMountedした直後に必ず１回watchコールバックを実行する方法を探していたけど、なさそうだった。