oxc-project/oxc · error · OxcDiagnostic

The computed property cannot be used in `data()` because it

Error message

The computed property cannot be used in `data()` because it is before initialization.

What it means

Diagnostic from oxlint's vue/no-computed-properties-in-data rule (since oxlint 1.67.0). It fires when data() reads a computed property via `this`, e.g. `data() { return { x: this.computedProp } }`. In the Options API initialization order, data() runs before computed properties are initialized, so the read yields undefined (or throws for complex accesses) and never re-runs when the computed changes.

Source

Thrown at crates/oxc_linter/src/rules/vue/no_computed_properties_in_data.rs:21

use rustc_hash::FxHashSet;

use oxc_ast::{
    AstKind,
    ast::{Expression, ObjectExpression, ObjectPropertyKind},
};
use oxc_diagnostics::OxcDiagnostic;
use oxc_macros::declare_oxc_lint;
use oxc_span::{GetSpan, Span};

use crate::{
    AstNode,
    context::LintContext,
    rule::Rule,
    utils::{is_this_object, is_vue_component_options_object},
};

fn no_computed_properties_in_data_diagnostic(span: Span) -> OxcDiagnostic {
    OxcDiagnostic::warn(
        "The computed property cannot be used in `data()` because it is before initialization.",
    )
    .with_label(span)
}

#[derive(Debug, Default, Clone)]
pub struct NoComputedPropertiesInData;

declare_oxc_lint!(
    /// ### 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.

View on GitHub (pinned to e1e7af627c)

Solutions

Move the derived value into computed: computed: { x() { return this.computedProp } }
If the value must be snapshot at creation, compute it in created() and assign to this.x there
Delete the duplicated field from data entirely so there is one source of truth

Example fix

// before
data() {
  return { fullTitle: this.title.toUpperCase() }
},
computed: { title() { return this.raw + '!' } }
// after
computed: {
  title() { return this.raw + '!' },
  fullTitle() { return this.title.toUpperCase() },
}

Defensive patterns

Strategy: validation

Validate before calling

# scan data() bodies for this.<computed-name> references
grep -rnA10 "data *()" --include='*.vue' src | grep "this\."

Prevention

Never read computed properties inside data(); derive state in computed instead
During refactors, grep for duplicated keys between data and computed to catch copies

When it happens

Trigger: A Vue component options object (is_vue_component_options_object) whose `data` function body contains a member access on `this` (is_this_object) that names a property also declared under `computed`.

Common situations: Migrating derived state into computed during refactors but leaving copies in data; initializing data from what 'looks like' an already-available property; bugs that appear only at runtime as undefined values.

Related errors

AI-assisted analysis of oxc-project/oxc@e1e7af627c (2026-08-20). Data as JSON: /api/errors/10342571cfd42a4c. Report an issue: GitHub.