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 break