---
url: /docs/guide/usage/linter/rules/vue/no-computed-properties-in-data.md
---

### 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:

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

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

```vue
<script>
export default {
  data() {
    const foo = this.foo; // `foo` is a prop, not a computed
    return {};
  },
  props: ["foo"],
};
</script>
```

## How to use

## Version

This rule was added in v1.67.0.

## References