はじめに
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コールバックを実行する方法を探していたけど、なさそうだった。
