{"record":{"id":"5cbc71c3ab9a7010","repo":"oxc-project/oxc","slug":"object-declaration-on-data-property-is-deprecate","errorCode":null,"errorMessage":"Object declaration on `data` property is deprecated.","messagePattern":"Object declaration on `data` property is deprecated\\.","errorType":"validation","errorClass":"OxcDiagnostic","httpStatus":null,"severity":"warning","filePath":"crates/oxc_linter/src/rules/vue/no_deprecated_data_object_declaration.rs","lineNumber":9,"sourceCode":"use oxc_ast::{AstKind, ast::Expression};\nuse oxc_diagnostics::OxcDiagnostic;\nuse oxc_macros::declare_oxc_lint;\nuse oxc_span::Span;\n\nuse crate::{AstNode, context::LintContext, rule::Rule, utils::is_vue_component_options_object};\n\nfn no_deprecated_data_object_declaration_diagnostic(span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(\"Object declaration on `data` property is deprecated.\")\n        .with_help(\"Use a function declaration instead.\")\n        .with_label(span)\n}\n\n#[derive(Debug, Default, Clone)]\npub struct NoDeprecatedDataObjectDeclaration;\n\ndeclare_oxc_lint!(\n    /// ### What it does\n    ///\n    /// Disallow object declarations for `data` (in Vue.js 3.0.0+).\n    ///\n    /// ### Why is this bad?\n    ///\n    /// In Vue 3, declaring `data` as an object causes the same object to be\n    /// shared between every instance of the component, which leads to cross-\n    /// instance state pollution. `data` must be a function that returns a\n    /// fresh object per instance.","sourceCodeStart":1,"sourceCodeEnd":27,"githubUrl":"https://github.com/oxc-project/oxc/blob/e1e7af627c8843ab64044ed466b128fcc21a035b/crates/oxc_linter/src/rules/vue/no_deprecated_data_object_declaration.rs#L1-L27","documentation":"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.","triggerScenarios":"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).","commonSituations":"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.","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"],"exampleFix":"// before\ndata: {\n  count: 0,\n}\n// after\ndata() {\n  return {\n    count: 0,\n  }\n}","handlingStrategy":"validation","validationCode":"# find object-form data declarations\ngrep -rnE \"data: *\\{\" --include='*.vue' src","typeGuard":null,"tryCatchPattern":null,"preventionTips":["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"],"tags":["vue","oxlint","lint","options-api","data","vue3","migration","deprecated"],"backgroundTag":"vue-2-to-3-migration","analyzedSha":"e1e7af627c8843ab64044ed466b128fcc21a035b","analyzedAt":"2026-08-20T07:01:07.079Z","contentChangedAt":"2026-08-20T07:01:07.079Z","schemaVersion":2},"datasetVersion":"2026-09-14T00:17:10.932Z"}