What causes "Object declaration on `data` property is deprecated." in oxc-project/oxc?

Convert to a function returning the object: data() { return { ... } }

oxc-project/oxc · warning · OxcDiagnostic

Object declaration on `data` property is deprecated.

Error message

Object declaration on `data` property is deprecated.

What it means

Diagnostic from oxlint's vue/no-deprecated-data-object-declaration rule (since oxlint 1.62.0). It fires when a component declares `data` as a plain object literal (`data: { ... }`) instead of a function. Vue 3 requires data to be a function so each instance gets independent reactive state; the object form is a Vue 2 pattern that Vue 3 does not support and that risks shared state between instances even where tolerated.

Source

Thrown at crates/oxc_linter/src/rules/vue/no_deprecated_data_object_declaration.rs:9

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

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

fn no_deprecated_data_object_declaration_diagnostic(span: Span) -> OxcDiagnostic {
    OxcDiagnostic::warn("Object declaration on `data` property is deprecated.")
        .with_help("Use a function declaration instead.")
        .with_label(span)
}

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

declare_oxc_lint!(
    /// ### What it does
    ///
    /// Disallow object declarations for `data` (in Vue.js 3.0.0+).
    ///
    /// ### Why is this bad?
    ///
    /// In Vue 3, declaring `data` as an object causes the same object to be
    /// shared between every instance of the component, which leads to cross-
    /// instance state pollution. `data` must be a function that returns a
    /// fresh object per instance.

View on GitHub (pinned to e1e7af627c)

Solutions

Convert to a function returning the object: data() { return { ... } }
During a Vue 2 to 3 migration, run this rule across the whole codebase and fix mechanically
Keep the rule enabled in CI to prevent regressions to object declarations

Example fix

// before
data: {
  count: 0,
}
// after
data() {
  return {
    count: 0,
  }
}

Defensive patterns

Strategy: validation

Validate before calling

# find object-form data declarations
grep -rnE "data: *\{" --include='*.vue' src

Prevention

Always author data as a function, even in Vue 2, to make migrations trivial
Enable the vue3 migration rule set in CI during upgrades so object data cannot merge

When it happens

Trigger: A Vue component options object contains an Expression::ObjectExpression as the value of the `data` property (matched via find_property / is_vue_component_options_object).

Common situations: Copying Vue 2 examples or old component code into a Vue 3 project; app-level mixins or global components written pre-3.0; silent state-sharing bugs when one instance's data mutates another's.

Related errors

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