---
url: /docs/guide/usage/linter/rules/vue/no-watch-after-await.md
---

### What it does

Disallow asynchronously-registered `watch`.

### Why is this bad?

`watch` and `watchEffect` registered after an `await` expression in
`setup()` may not work as expected because they are registered after
the component instance has finished setting up.

### Examples

Examples of **incorrect** code for this rule:

```vue
<script>
import { watch } from "vue";
export default {
  async setup() {
    await doSomething();
    watch(foo, () => {
      /* ... */
    }); // error
  },
};
</script>
```

Examples of **correct** code for this rule:

```vue
<script>
import { watch } from "vue";
export default {
  async setup() {
    watch(foo, () => {
      /* ... */
    }); // ok
    await doSomething();
  },
};
</script>
```

## How to use

## Version

This rule was added in v1.67.0.

## References