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.
Specification
- Skill ID
- vuejs-ai/skills/vue-debug-guides
- Publisher
- vuejs-ai
- Repository
- skills
- Installs
- 0
- Files
- 140
- Synced
- Sep 23, 2026
How to use it
Open any RiverX project, open the Skills panel in the chat, and search for this identifier. The files are fetched from the source repository at install time.
vuejs-ai/skills/vue-debug-guidesInstalls these files- SKILL.md
- reference/animation-key-for-rerender.md
- reference/animation-transitiongroup-performance.md
- reference/async-component-error-handling.md
- reference/async-component-keepalive-ref-issue.md
- reference/async-component-suspense-control.md
- reference/async-component-vue-router.md
- reference/attrs-event-listener-merging.md
- reference/checkbox-true-false-value-form-submission.md
- reference/cleanup-side-effects.md
- reference/click-events-on-components.md
- reference/component-naming-conflicts.md
- reference/component-ref-requires-defineexpose.md
- reference/composable-avoid-hidden-side-effects.md
- reference/composable-call-location-restrictions.md
- reference/composable-naming-return-pattern.md
- reference/composable-tovalue-inside-watcheffect.md
- reference/composition-api-not-functional-programming.md
- reference/composition-api-script-setup-async-context.md
- reference/composition-api-vs-react-hooks-differences.md
- reference/computed-array-mutation.md
- reference/computed-conditional-dependencies.md
- reference/computed-no-parameters.md
- reference/computed-no-side-effects.md
- reference/computed-return-value-readonly.md
- reference/configure-app-before-mount.md
- reference/declare-emits-for-documentation.md
- reference/define-expose-before-await.md
- reference/define-model-default-value-sync.md
- reference/defineEmits-must-be-top-level.md
- reference/defineEmits-no-runtime-and-type-mixed.md
- reference/definemodel-object-mutation-no-emit.md
- reference/dom-update-timing-nexttick.md
- reference/dynamic-argument-constraints.md
- reference/dynamic-component-registration-vite.md
- reference/event-modifier-order-matters.md
- reference/exact-modifier-for-precise-shortcuts.md
- reference/fallthrough-attrs-overwrite-vue3.md
- reference/in-dom-template-parsing-caveats.md
- reference/inheritattrs-false-for-wrapper-components.md
- reference/keepalive-router-nested-double-mount.md
- reference/keepalive-transition-memory-leak.md
- reference/keyup-modifier-timing.md
- reference/lifecycle-dom-access-timing.md
- reference/lifecycle-hooks-synchronous-registration.md
- reference/lifecycle-ssr-awareness.md
- reference/local-components-not-in-descendants.md
- reference/mount-return-value.md
- reference/multi-root-component-class-attrs.md
- reference/native-event-collision-with-emits.md
- reference/no-passive-with-prevent.md
- reference/no-v-if-with-v-for.md
- reference/perf-computed-object-stability.md
- reference/perf-props-stability-update-optimization.md
- reference/plugin-global-properties-sparingly.md
- reference/plugin-install-before-mount.md
- reference/plugin-prefer-provide-inject-over-global-properties.md
- reference/plugin-typescript-type-augmentation.md
- reference/prop-defineprops-scope-limitation.md
- reference/provide-inject-debugging-challenges.md
- reference/provide-inject-default-value-factory.md
- reference/provide-inject-reactivity-not-automatic.md
- reference/provide-inject-synchronous-setup.md
- reference/reactive-destructuring.md
- reference/reactivity-debugging-hooks.md
- reference/reactivity-markraw-for-non-reactive.md
- reference/reactivity-proxy-identity-hazard.md
- reference/reactivity-same-tick-batching.md
- reference/ref-value-access.md
- reference/refs-in-collections-need-value.md
- reference/render-function-avoid-internal-vnode-properties.md
- reference/render-function-vnodes-must-be-unique.md
- reference/rendering-render-function-h-import-vue3.md
- reference/rendering-render-function-return-from-setup.md
- reference/rendering-render-function-slots-as-functions.md
- reference/rendering-resolve-component-for-string-names.md
- reference/select-initial-value-ios-bug.md
- reference/self-referencing-component-name.md
- reference/sfc-named-exports-forbidden.md
- reference/sfc-scoped-css-child-component-styling.md
- reference/sfc-scoped-css-dynamic-content.md
- reference/sfc-scoped-css-slot-content.md
- reference/sfc-script-setup-reactivity.md
- reference/slot-forwarding-to-child-components.md
- reference/slot-implicit-default-content.md
- reference/slot-name-reserved-prop.md
- reference/slot-named-scoped-explicit-default.md
- reference/slot-render-scope-parent-only.md
- reference/slot-v-slot-on-components-or-templates-only.md
- reference/ssr-hydration-mismatch-causes.md
- reference/ssr-platform-specific-apis.md
- reference/state-ssr-cross-request-pollution.md
- reference/suspense-no-builtin-error-handling.md
- reference/suspense-ssr-hydration-issues.md
- reference/tailwind-dynamic-class-generation.md
- reference/teleport-scoped-styles-limitation.md
- reference/teleport-ssr-hydration.md
- reference/teleport-target-must-exist.md
- reference/template-expressions-restrictions.md
- reference/template-functions-no-side-effects.md
- reference/template-ref-null-with-v-if.md
- reference/template-ref-unwrapping-top-level.md
- reference/template-ref-v-for-order.md
- reference/textarea-no-interpolation.md
- reference/transition-group-flip-inline-elements.md
- reference/transition-group-move-animation-position-absolute.md
- reference/transition-group-no-default-wrapper-vue3.md
- reference/transition-js-hooks-done-callback.md
- reference/transition-nested-duration.md
- reference/transition-reusable-scoped-style.md
- reference/transition-router-view-appear.md
- reference/transition-type-when-mixed.md
- reference/transition-unmount-hook-timing.md
- reference/ts-defineprops-boolean-default-false.md
- reference/ts-defineprops-imported-types-limitations.md
- reference/ts-event-handler-explicit-typing.md
- reference/ts-reactive-no-generic-argument.md
- reference/ts-shallowref-for-dynamic-components.md
- reference/ts-template-ref-null-handling.md
- reference/ts-template-type-casting.md
- reference/ts-withdefaults-mutable-factory-function.md
- reference/undeclared-emits-double-firing.md
- reference/use-template-ref-vue35.md
- reference/v-else-must-follow-v-if.md
- reference/v-for-component-props.md
- reference/v-for-computed-reverse-sort.md
- reference/v-for-key-attribute.md
- reference/v-for-range-starts-at-one.md
- reference/v-if-null-check-order.md
- reference/v-model-ignores-html-attributes.md
- reference/v-model-ime-composition.md
- reference/v-model-number-modifier-behavior.md
- reference/v-show-template-limitation.md
- reference/watch-async-cleanup.md
- reference/watch-async-creation-memory-leak.md
- reference/watch-deep-same-object-reference.md
- reference/watch-flush-timing.md
- reference/watch-reactive-property-getter.md
- reference/watcheffect-async-dependency-tracking.md
- reference/watcheffect-flush-post-for-refs.md
What this skill tells the agent
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
More from vuejs-ai
Use this skill in a project
Open any RiverX project, search the Skills panel for vuejs-ai/skills/vue-debug-guides, and install it in one click.