{"record":{"id":"39b406cc007911cd","repo":"oxc-project/oxc","slug":"you-should-not-use-an-arrow-function-to-define-a-w","errorCode":null,"errorMessage":"You should not use an arrow function to define a watcher.","messagePattern":"You should not use an arrow function to define a watcher\\.","errorType":"validation","errorClass":"OxcDiagnostic","httpStatus":null,"severity":"warning","filePath":"crates/oxc_linter/src/rules/vue/no_arrow_functions_in_watch.rs","lineNumber":17,"sourceCode":"use oxc_ast::{\n    AstKind,\n    ast::{\n        CallExpression, ExportDefaultDeclarationKind, Expression, ObjectExpression,\n        ObjectPropertyKind,\n    },\n};\nuse oxc_diagnostics::OxcDiagnostic;\nuse oxc_macros::declare_oxc_lint;\nuse oxc_span::{GetSpan, Span};\n\nuse crate::{\n    AstNode, context::LintContext, frameworks::FrameworkOptions, rule::Rule, utils::find_property,\n};\n\nfn no_arrow_functions_in_watch_diagnostic(span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(\"You should not use an arrow function to define a watcher.\")\n        .with_help(\"Use a regular function or method shorthand instead of an arrow function.\")\n        .with_label(span)\n}\n\n#[derive(Debug, Default, Clone)]\npub struct NoArrowFunctionsInWatch;\n\ndeclare_oxc_lint!(\n    /// ### What it does\n    ///\n    /// This rule disallows using arrow functions when defining a watcher.\n    ///\n    /// ### Why is this bad?\n    ///\n    /// Arrow functions bind `this` lexically, which means they don't have access to the Vue component instance.\n    /// In Vue watchers, you often need access to `this` to interact with component data, methods, or other properties.\n    /// Using regular functions or method shorthand ensures proper `this` binding.\n    ///","sourceCodeStart":1,"sourceCodeEnd":35,"githubUrl":"https://github.com/oxc-project/oxc/blob/e1e7af627c8843ab64044ed466b128fcc21a035b/crates/oxc_linter/src/rules/vue/no_arrow_functions_in_watch.rs#L1-L35","documentation":"Diagnostic from oxlint's vue/no-arrow-functions-in-watch rule (since oxlint 1.39.0). It fires when an Options API `watch` option uses an arrow function as the handler. Arrow functions capture the enclosing `this` (module scope or undefined) instead of the component instance, so `this.foo` inside the watcher breaks at runtime. The help text suggests a regular function or method shorthand.","triggerScenarios":"A Vue options object (detected via find_property on the component options) has `watch: { foo: (val, oldVal) => { this.doThing() } }` — any arrow function as the immediate watch handler value.","commonSituations":"Developers converting methods or computed to watchers using arrow shorthand; class-property-style components where arrows are idiomatic everywhere except watch; copy-paste from Composition API examples into Options API code.","solutions":["Use method shorthand: watch: { foo(val, oldVal) { this.doThing(val) } }","Or reference a named method by string: watch: { foo: 'doThing' }","Migrate the component to the Composition API watch()/watchEffect() where arrow closures are correct"],"exampleFix":"// before\nwatch: {\n  query: (val) => { this.search(val) },\n}\n// after\nwatch: {\n  query(val) { this.search(val) },\n}","handlingStrategy":"validation","validationCode":"# rough scan: arrow functions inside watch blocks\ngrep -rnA6 \"watch: *{\" --include='*.vue' src | grep \"=>\"","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Use method shorthand or method-name strings for all Options API watch handlers","Consider migrating hot spots to the Composition API watch(), where arrows are safe"],"tags":["vue","oxlint","lint","options-api","watch","this-binding"],"backgroundTag":"vue-watch-handler-this-binding","analyzedSha":"e1e7af627c8843ab64044ed466b128fcc21a035b","analyzedAt":"2026-08-20T07:01:07.079Z","contentChangedAt":"2026-08-20T07:01:07.079Z","schemaVersion":2},"datasetVersion":"2026-09-14T05:17:10.506Z"}