no-watch-after-await.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/no-watch-after-await	disallow asynchronously registered `watch`	v7.0.0

vue/no-watch-after-await

disallow asynchronously registered watch

• ⚙️ This rule is included in all of "plugin:vue/vue3-essential", "plugin:vue/vue3-strongly-recommended" and "plugin:vue/vue3-recommended".

📖 Rule Details

This rule reports the watch() after await expression.
In setup() function, watch() should be registered synchronously.

<script>
import { watch } from 'vue'
export default {
  async setup() {
    /* ✓ GOOD */
    watch(watchSource, () => { /* ... */ })

    await doSomething()

    /* ✗ BAD */
    watch(watchSource, () => { /* ... */ })
  }
}
</script>

This rule is not reported when using the stop handle.

<script>
import { watch } from 'vue'
export default {
  async setup() {
    await doSomething()

    /* ✓ GOOD */
    const stopHandle = watch(watchSource, () => { /* ... */ })

    // later
    stopHandle()
  }
}
</script>

🔧 Options

Nothing.

📚 Further Reading

• Guide - Reactivity - Computed and Watch
• Vue RFCs - 0013-composition-api

🚀 Version

This rule was introduced in eslint-plugin-vue v7.0.0

🔍 Implementation

• Rule source
• Test source