VUE0018Do not read watchEffect dependencies after await

Why it happens

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.

Fix

Read reactive values before awaiting, or use watch() with an explicit source.

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>

Verify the fix

Run only this rule after editing so the report stays focused on the diagnostic you are closing:

pnpm vite-doctor . --framework vue --rules vue/watch/no-async-watcheffect-after-await-read

Useful links

• Upstream docs

Related rule

• vue/watch/no-async-watcheffect-after-await-read