← Back to rules

vue/no-watch-after-await Correctness

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:

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

Examples of correct code for this rule:

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

How to use

To enable this rule using the config file or in the CLI, you can use:

Config (.oxlintrc.json)

{
  "plugins": ["vue"],
  "rules": {
    "vue/no-watch-after-await": "error"
  }
}

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["vue"],
  rules: {
    "vue/no-watch-after-await": "error",
  },
});

CLI

oxlint --deny vue/no-watch-after-await --vue-plugin

Version

This rule was added in vnext.

References

• Rule Source
• Open rule in Oxc Playground