{"record":{"id":"10342571cfd42a4c","repo":"oxc-project/oxc","slug":"the-computed-property-cannot-be-used-in-data-b","errorCode":null,"errorMessage":"The computed property cannot be used in `data()` because it is before initialization.","messagePattern":"The computed property cannot be used in `data\\(\\)` because it is before initialization\\.","errorType":"validation","errorClass":"OxcDiagnostic","httpStatus":null,"severity":"error","filePath":"crates/oxc_linter/src/rules/vue/no_computed_properties_in_data.rs","lineNumber":21,"sourceCode":"use rustc_hash::FxHashSet;\n\nuse oxc_ast::{\n    AstKind,\n    ast::{Expression, ObjectExpression, ObjectPropertyKind},\n};\nuse oxc_diagnostics::OxcDiagnostic;\nuse oxc_macros::declare_oxc_lint;\nuse oxc_span::{GetSpan, Span};\n\nuse crate::{\n    AstNode,\n    context::LintContext,\n    rule::Rule,\n    utils::{is_this_object, is_vue_component_options_object},\n};\n\nfn no_computed_properties_in_data_diagnostic(span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(\n        \"The computed property cannot be used in `data()` because it is before initialization.\",\n    )\n    .with_label(span)\n}\n\n#[derive(Debug, Default, Clone)]\npub struct NoComputedPropertiesInData;\n\ndeclare_oxc_lint!(\n    /// ### What it does\n    ///\n    /// Disallow accessing computed properties inside `data()`.\n    ///\n    /// ### Why is this bad?\n    ///\n    /// `data()` runs **before** computed properties are initialized, so\n    /// `this.<computedName>` evaluates to `undefined` and leaves silently\n    /// broken state in the component instance.","sourceCodeStart":3,"sourceCodeEnd":39,"githubUrl":"https://github.com/oxc-project/oxc/blob/e1e7af627c8843ab64044ed466b128fcc21a035b/crates/oxc_linter/src/rules/vue/no_computed_properties_in_data.rs#L3-L39","documentation":"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.","triggerScenarios":"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`.","commonSituations":"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.","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"],"exampleFix":"// before\ndata() {\n  return { fullTitle: this.title.toUpperCase() }\n},\ncomputed: { title() { return this.raw + '!' } }\n// after\ncomputed: {\n  title() { return this.raw + '!' },\n  fullTitle() { return this.title.toUpperCase() },\n}","handlingStrategy":"validation","validationCode":"# scan data() bodies for this.<computed-name> references\ngrep -rnA10 \"data *()\" --include='*.vue' src | grep \"this\\.\"","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Never read computed properties inside data(); derive state in computed instead","During refactors, grep for duplicated keys between data and computed to catch copies"],"tags":["vue","oxlint","lint","options-api","computed","data","init-order"],"backgroundTag":"vue-options-api-init-order","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"}