Skill detail
vue-debug-guides
Vue 3 debugging and error handling for runtime errors, warnings, async failures, and SSR/hydration issues. Use when diagnosing or fixing Vue issues.
Why we recommend it: Vue 3 debugging and error handling for runtime errors, warnings, async failures, and SSR/hydration issues, with a reference index of common problems.
Inspect before use
Read the source instructions and check the requirements before you install this skill.
SKILL.md
The saved excerpt is a snapshot from when this skill was listed. The external source remains the complete and most current version.
--- name: vue-debug-guides description: Vue 3 debugging and error handling for runtime errors, warnings, async failures, and SSR/hydration issues. Use when diagnosing or fixing Vue issues. --- 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](reference/reactivity-debugging-hooks.md) - Ref values not updating due to missing .value access → See [ref-value-access](reference/ref-value-access.md) - State stops updating after destructuring reactive objects → See [reactive-destructuring](reference/reactive-destructuring.md) - Refs inside arrays, Maps, or Sets not unwrapping → See [refs-in-collections-need-value](reference/refs-in-collections-need-value.md) - Nested refs rendering as [object Object] in templates → See [template-ref-unwrapping-top-level](reference/template-ref-unwrapping-top-level.md) - Reactive proxy identity comparisons always return false → See [reactivity-proxy-identity-hazard](reference/reactivity-proxy-identity-hazard.md) - Third-party instances breaking when proxied → See [reactivity-markraw-for-non-reactive](reference/reactivity-markraw-for-non-reactive.md) - Watchers only firing once per tick unexpectedly → See [reactivity-same-tick-batching](reference/reactivity-same-tick-batching.md) ### Computed - Computed getter triggers mutations or requests unexpectedly → See [computed-no-side-effects](reference/computed-no-side-effects.md) - Mutating computed values causes changes to disappear → See [computed-return-value-readonly](reference/computed-return-value-readonly.md) - Computed value never updates after conditional logic → See [computed-conditional-dependencies](reference/computed-conditional-dependencies.md) - Sorting or reversing arrays breaks original state → See [computed-array-mutation](reference/computed-array-mutation.md) - Passing parameters to computed properties fails → See [computed-no-parameters](reference/computed-no-parameters.md) ### Watchers - Async operations overwriting with stale data → See [watch-async-cleanup](reference/watch-async-cleanup.md) - Creating watchers inside async callbacks → See [watch-async-creation-memory-leak](reference/watch-async-creation-memory-leak.md) - Watcher never triggers for reactive object properties → See [watch-reactive-property-getter](reference/watch-reactive-property-getter.md) - Async watchEffect misses dependencies after await → See [watcheffect-async-dependency-tracking](reference/watcheffect-async-dependency-tracking.md) - DOM reads are stale inside watcher callbacks → See [watch-flush-timing](reference/watch-flush-timing.md) - Deep watchers report identical old/new values → See [watch-deep-same-object-reference](reference/watch-deep-same-object-reference.md) - watchEffect runs before template refs update → See [watcheffect-flush-post-for-refs](reference/watcheffect-flush-post-for-refs.md) ### Components - Child component throws "component not found" error → See [local-components-not-in-descendants](reference/local-components-not-in-descendants.md) - Click listener doesn't fire on custom component → See [click-events-on-components](reference/click-events-on-components.md) - Parent can't access child ref data in script setup → See [component-ref-requires-defineexpose](reference/component-ref-requires-defineexpose.md) - HTML template parsing breaks Vue component syntax → See [in-dom-template-parsing-caveats](reference/in-dom-template-parsing-caveats.md) - Wrong component renders due to naming collisions → See [component-naming-conflicts](reference/component-naming-conflicts.md) - Parent styles don't apply to multi-root component → See [multi-root-component-class-attrs](reference/multi-root-component-class-attrs.md) ### Props & Emits - Variables referenced in defineProps cause errors → See [prop-defineprops-scope-limitation](refRead the full source on GitHub (opens external page)