← Back to rules

vue/no-computed-properties-in-data Correctness

What it does

Disallow accessing computed properties inside data().

Why is this bad?

data() runs before computed properties are initialized, so this.<computedName> evaluates to undefined and leaves silently broken state in the component instance.

Examples

Examples of incorrect code for this rule:

<script>
export default {
  data() {
    const foo = this.foo; // `foo` is a computed property
    return {};
  },
  computed: {
    foo() {},
  },
};
</script>

Examples of correct code for this rule:

<script>
export default {
  data() {
    const foo = this.foo; // `foo` is a prop, not a computed
    return {};
  },
  props: ["foo"],
};
</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-computed-properties-in-data": "error"
  }
}

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["vue"],
  rules: {
    "vue/no-computed-properties-in-data": "error",
  },
});

CLI

oxlint --deny vue/no-computed-properties-in-data --vue-plugin

Version

This rule was added in vnext.

References

• Rule Source
• Open rule in Oxc Playground