Vue · VUE0018
Do not read watchEffect dependencies after await
Flags reactive dependency reads after an await in an async watchEffect callback.
vue/watch/no-async-watcheffect-after-await-readsrc/rule-packs/vue/rules/vue/no-async-watch-effect-after-await-read.ts Upstream docs Run this rule
pnpm vite-doctor . --framework vue --rules vue/watch/no-async-watcheffect-after-await-read
Why it matters
Vue tracks watchEffect dependencies during synchronous execution. Reads after await do not establish dependencies that rerun the effect; ordinary object and method accesses do not establish reactive dependencies.
Recommended fix
Read reactive values before awaiting, or use watch() with an explicit source.
Useful links
Example
Read watchEffect dependencies before await
Before
<script setup lang="ts">
watchEffect(async () => {
await loadSettings()
console.log(userId.value)
})
</script>
After
<script setup lang="ts">
watchEffect(async () => {
const id = userId.value
await loadSettings()
console.log(id)
})
</script>