vue-debug-guides▌

Vue 3 debugging and error handling for runtime issues, warnings, async failures, and hydration bugs. For development best practices and common gotchas, use vue-best-practices.

Reactivity

• Tracing unexpected re-renders and state updates → See reactivity-debugging-hooks
• Ref values not updating due to missing .value access → See ref-value-access
• State stops updating after destructuring reactive objects → See reactive-destructuring
• Refs inside arrays, Maps, or Sets not unwrapping → See refs-in-collections-need-value
• Nested refs rendering as [object Object] in templates → See template-ref-unwrapping-top-level
• Reactive proxy identity comparisons always return false → See reactivity-proxy-identity-hazard
• Third-party instances breaking when proxied → See reactivity-markraw-for-non-reactive
• Watchers only firing once per tick unexpectedly → See reactivity-same-tick-batching

Computed

• Computed getter triggers mutations or requests unexpectedly → See computed-no-side-effects
• Mutating computed values causes changes to disappear → See computed-return-value-readonly
• Computed value never updates after conditional logic → See computed-conditional-dependencies
• Sorting or reversing arrays breaks original state → See computed-array-mutation
• Passing parameters to computed properties fails → See computed-no-parameters

Watchers

• Async operations overwriting with stale data → See watch-async-cleanup
• Creating watchers inside async callbacks → See watch-async-creation-memory-leak
• Watcher never triggers for reactive object properties → See watch-reactive-property-getter
• Async watchEffect misses dependencies after await → See watcheffect-async-dependency-tracking
• DOM reads are stale inside watcher callbacks → See watch-flush-timing
• Deep watchers report identical old/new values → See watch-deep-same-object-reference
• watchEffect runs before template refs update → See watcheffect-flush-post-for-refs

Components

• Child component throws "component not found" error → See local-components-not-in-descendants
• Click listener doesn't fire on custom component → See click-events-on-components
• Parent can't access child ref data in script setup → See component-ref-requires-defineexpose
• HTML template parsing breaks Vue component syntax → See in-dom-template-parsing-caveats
• Wrong component renders due to naming collisions → See component-naming-conflicts
• Parent styles don't apply to multi-root component → See multi-root-component-class-attrs

Props & Emits

• Variables referenced in defineProps cause errors → See prop-defineprops-scope-limitation
• Component emits undeclared event causing warnings → See declare-emits-for-documentation
• defineEmits used inside function or conditional → See defineEmits-must-be-top-level
• defineEmits has both type and runtime arguments → See defineEmits-no-runtime-and-type-mixed
• Native event listeners not responding to clicks → See native-event-collision-with-emits
• Component event fires twice when clicking → See undeclared-emits-double-firing

Templates

• Getting template compilation errors with statements → See template-expressions-restrictions
• "Cannot read property of undefined" runtime errors → See v-if-null-check-order
• Dynamic directive arguments not working properly → See dynamic-argument-constraints
• v-else elements rendering unconditionally always → See v-else-must-follow-v-if
• Mixing v-if with v-for causes precedence bugs and migration breakage → See no-v-if-with-v-for
• Template function calls mutating state cause unpredictable re-render bugs → See template-functions-no-side-effects
• Child components in loops showing undefined data → See v-for-component-props
• Array order changing after sorting or reversing → See v-for-computed-reverse-sort
• List items disappearing or swapping state unexpectedly → See v-for-key-attribute
• Getting off-by-one errors with range iteration → See v-for-range-starts-at-one
• v-show or v-else not working on template elements → See v-show-template-limitation

Template Refs

• Ref becomes null when element is conditionally hidden → See template-ref-null-with-v-if
• Ref array indices don't match data array in loops → See template-ref-v-for-order
• Refactoring template ref names breaks silently in code → See use-template-ref-vue35

Forms & v-model

• Initial form values not showing when using v-model → See v-model-ignores-html-attributes
• Textarea content changes not updating the ref → See textarea-no-interpolation
• iOS users cannot select dropdown first option → See select-initial-value-ios-bug
• Parent and child components have different values → See define-model-default-value-sync
• Object property changes not syncing to parent → See definemodel-object-mutation-no-emit
• Real-time search/validation broken for Chinese/Japanese input → See v-model-ime-composition
• Number input returns empty string instead of zero → See v-model-number-modifier-behavior
• Custom checkbox values not submitted in forms → See checkbox-true-false-value-form-submission

Events & Modifiers

• Chaining multiple event modifiers produces unexpected results → See event-modifier-order-matters
• Keyboard shortcuts don't fire with system modifier keys → See keyup-modifier-timing
• Keyboard shortcuts fire with unintended modifier combinations → See exact-modifier-for-precise-shortcuts
• Combining passive and prevent modifiers breaks event behavior → See no-passive-with-prevent

Lifecycle

• Memory leaks from unremoved event listeners → See cleanup-side-effects
• DOM access fails before component mounts → See lifecycle-dom-access-timing
• DOM reads return stale values after state changes → See dom-update-timing-nexttick
• SSR rendering differs from client hydration → See lifecycle-ssr-awareness
• Lifecycle hooks registered asynchronously never run → See lifecycle-hooks-synchronous-registration

Slots

• Accessing child component data in slot content returns undefined values → See slot-render-scope-parent-only
• Mixing named and scoped slots together causes compilation errors → See slot-named-scoped-explicit-default
• Using v-slot on native HTML elements causes compilation errors → See slot-v-slot-on-components-or-templates-only
• Unexpected content placement from implicit default slot behavior → See slot-implicit-default-content
• Scoped slot props missing expected name property → See slot-name-reserved-prop
• Wrapper components breaking child slot functionality → See slot-forwarding-to-child-components

Provide/Inject

• Calling provide after async operations fails silently → See provide-inject-synchronous-setup
• Tracing where provided values come from → See provide-inject-debugging-challenges
• Injected values not updating when provider changes → See provide-inject-reactivity-not-automatic
• Multiple components share same default object → See provide-inject-default-value-factory

Attrs

• Both internal and fallthrough event handlers execute → See attrs-event-listener-merging
• Explicit attributes overwritten by fallthrough values → See fallthrough-attrs-overwrite-vue3
• Attributes applying to wrong element in wrappers → See inheritattrs-false-for-wrapper-components

Composables

• Composable called outside setup context or asynchronously → See composable-call-location-restrictions
• Composable reactive dependency not updating when input changes → See composable-tovalue-inside-watcheffect
• Composable mutates external state unexpectedly → See composable-avoid-hidden-side-effects
• Destructuring composable returns breaks reactivity unexpectedly → See composable-naming-return-pattern

Composition API

• Lifecycle hooks failing silently after async operations → See composition-api-script-setup-async-context
• Parent component refs unable to access exposed properties → See define-expose-before-await
• Functional-programming patterns break expected Vue reactivity behavior → See composition-api-not-functional-programming
• React Hook mental model causes incorrect Composition API usage → See composition-api-vs-react-hooks-differences

Animation

• Animations fail to trigger when DOM nodes are reused → See animation-key-for-rerender
• TransitionGroup list updates feel laggy under load → See animation-transitiongroup-performance

TypeScript

• Mutable prop defaults leak state between component instances → See
  how to use vue-debug-guides
  CursorClaude CodeClineCodexWindsurfGooseGitHub CopilotVS CodeGemini CLIKiloOpencodeKimi CLIRoo ClineAiderContinueZedBolt.newLovablev0Replit AgentSweepSmol DeveloperDevinCavemanAmpAntigravity

  How to use vue-debug-guides on Cursor

  AI-first code editor with Composer

  1

  Prerequisites

  Before installing skills in Cursor, ensure your development environment meets these requirements:

  • ›Cursor installed and configured on your development machine
  • ›Node.js version 16.0+ with npm package manager (verify with node --version)
  • ›Active project directory or workspace where you want to add vue-debug-guides

  2

  Execute installation command

  Execute the skills CLI command in your project's root directory to begin installation:

  $npx skills add https://github.com/hyf0/vue-skills --skill vue-debug-guidescopy

  The skills CLI fetches vue-debug-guides from GitHub repository hyf0/vue-skills and configures it for Cursor.

  3

  Select Cursor when prompted

  The CLI will show a list of available agents. Use arrow keys to navigate and space to select Cursor:

  ◆ Which agents do you want to install to?

  │

  │ ── Universal (.agents/skills) ── always included ────

  │ • Amp

  │ • Antigravity

  │ • Cline

  │ • Codex

  │ ●Cursor(selected)

  │ • Cursor

  │ • Windsurf

  4

  Verify installation

  Confirm successful installation by checking the skill directory location:

  .cursor/skills/vue-debug-guides

  Reload or restart Cursor to activate vue-debug-guides. Access the skill through slash commands (e.g., /vue-debug-guides) or your agent's skill management interface.

  ⚠

  Security & Verification Notice

  We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.

  Skills execute code in your development environment. Always verify the publisher's identity, review recent commits, and test in isolated environments before production deployment.

  Additional Resources

  ›View source code on GitHub›Skills CLI documentation›Learn more about Cursor›What are agent skills?