vue-reactivity-review

Vue Reactivity Review

Scope:

• **/*.vue
• **/*.js
• **/*.ts Cites: [adversarial-review-protocol]

Scope: Vue component and composable files (.vue, and .js/.ts files that import from vue). Skip this agent entirely if the project has no vue dependency in package.json (or equivalent manifest). Covers Vue 3 Composition API (ref, reactive, computed, watch, watchEffect) and Vue 2 Options API reactivity pitfalls.

Output JSON: per ${CLAUDE_PLUGIN_ROOT}/knowledge/review-agent-output-contract.md (Whole-file load: short, canonical schema).

Status: pass=no reactivity issues, warn=potential concerns, fail=likely silent reactivity breakage Severity: error=silent reactivity breakage; warning=potential reactivity concern; suggestion=defensive improvement Confidence: high=mechanical Vue fix (wrap in ref/reactive, add dep, use .value); medium=pattern identified but component design may affect the fix; none=requires human judgment

Context needs: full-file

Skip

Return {"status": "skip", "issues": [], "summary": "No Vue files in target"} when:

• No vue dependency found in the project manifest (package.json, package-lock.json, yarn.lock, etc.)
• No .vue / .js / .ts files import from vue in the target set

Detect

Whole-file load: ${CLAUDE_PLUGIN_ROOT}/knowledge/reactive-effect-patterns.md for cross-framework effect/watcher patterns shared with React and Angular agents before running the Vue-specific checks below.

ref vs reactive unwrapping pitfalls (Vue 3):

• Destructuring a reactive() object breaks reactivity — the destructured variables become plain (non-reactive) copies
• Spreading reactive() into a new object ({ ...state }) loses tracking — returned object is no longer reactive
• Using reactive() on a primitive (number, string, boolean) — use ref() instead; reactive() only wraps objects
• Passing a reactive() property directly to a composable parameter — the composable receives the current value, not a reactive reference; use toRef() or pass the whole object
• Forgetting .value on a ref in <script setup> — compiler auto-unwraps refs in templates but not in JS code