vue debug guides

Reactivity

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

Computed

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

Watchers

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

Components

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

Props & Emits

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

Templates

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

Template Refs

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

Forms & v-model

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

Events & Modifiers

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

Lifecycle

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

Slots

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

Provide/Inject

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

Attrs

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

Composables

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

Composition API

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

Animation

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

TypeScript

• Mutable prop defaults leak state between component instances → See ts-withdefaults-mutable-factory-function [blocked]
• reactive() generic typing causes ref unwrapping mismatches → See ts-reactive-no-generic-argument [blocked]
• Template refs throw null access errors before mount or after v-if unmount → See ts-template-ref-null-handling [blocked]
• Optional boolean props behave as false instead of undefined → See ts-defineprops-boolean-default-false [blocked]
• Imported defineProps types fail with unresolvable or complex type references → See ts-defineprops-imported-types-limitations [blocked]
• Untyped DOM event handlers fail under strict TypeScript settings → See ts-event-handler-explicit-typing [blocked]
• Dynamic component refs trigger reactive component warnings → See ts-shallowref-for-dynamic-components [blocked]
• Union-typed template expressions fail type checks without narrowing → See ts-template-type-casting [blocked]

Async Components

• Route components misconfigured with defineAsyncComponent lazy loading → See async-component-vue-router [blocked]
• Network failures or timeouts loading components → See async-component-error-handling [blocked]
• Template refs undefined after component reactivation → See async-component-keepalive-ref-issue [blocked]

Render Functions

• Render function output stays static after state changes → See rendering-render-function-return-from-setup [blocked]
• Reused vnode instances render incorrectly → See render-function-vnodes-must-be-unique [blocked]
• String component names render as HTML elements → See rendering-resolve-component-for-string-names [blocked]
• Accessing vnode internals breaks on Vue updates → See render-function-avoid-internal-vnode-properties [blocked]
• Vue 2 render function patterns crash in Vue 3 → See rendering-render-function-h-import-vue3 [blocked]
• Slot content not rendering from h() → See rendering-render-function-slots-as-functions [blocked]

KeepAlive

• Child components mount twice with nested Vue Router routes → See keepalive-router-nested-double-mount [blocked]
• Memory grows when combining KeepAlive with Transition animations → See keepalive-transition-memory-leak [blocked]

Transitions

• JavaScript transition hooks hang without done callback → See transition-js-hooks-done-callback [blocked]
• Move animations fail on inline list elements → See transition-group-flip-inline-elements [blocked]
• List items jump instead of smoothly animating → See transition-group-move-animation-position-absolute [blocked]
• Vue 2 to Vue 3 TransitionGroup wrapper changes break layout → See transition-group-no-default-wrapper-vue3 [blocked]
• Nested transitions cut off before finishing → See transition-nested-duration [blocked]
• Scoped styles stop working in reusable transition wrappers → See transition-reusable-scoped-style [blocked]
• RouterView transitions animate unexpectedly on first render → See transition-router-view-appear [blocked]
• Mixing CSS transitions and animations causes timing issues → See transition-type-when-mixed [blocked]
• Cleanup hooks missed during rapid transition swaps → See transition-unmount-hook-timing [blocked]

Teleport

• Teleport target element not found in DOM → See teleport-target-must-exist [blocked]
• Teleported content breaks SSR hydration → See teleport-ssr-hydration [blocked]
• Scoped styles not applying to teleported content → See teleport-scoped-styles-limitation [blocked]

Suspense

• Need to handle async errors from Suspense components → See suspense-no-builtin-error-handling [blocked]
• Using Suspense with server-side rendering → See suspense-ssr-hydration-issues [blocked]
• Async component loading/error UI ignored under Suspense → See async-component-suspense-control [blocked]

SSR

• HTML differs between server and client renders → See ssr-hydration-mismatch-causes [blocked]
• User state leaks between requests from shared singleton stores → See state-ssr-cross-request-pollution [blocked]
• Browser-only APIs crash server rendering in universal code paths → See ssr-platform-specific-apis [blocked]

Performance

• List children re-render unnecessarily because parent passes unstable props → See perf-props-stability-update-optimization [blocked]
• Computed objects retrigger effects despite equivalent values → See perf-computed-object-stability [blocked]

SFC (Single File Components)

• Trying to use named exports from component script blocks → See sfc-named-exports-forbidden [blocked]
• Variables not updating in template after changes → See sfc-script-setup-reactivity [blocked]
• Scoped styles not applying to child component elements → See sfc-scoped-css-child-component-styling [blocked]
• Scoped styles not applying to dynamic v-html content → See sfc-scoped-css-dynamic-content [blocked]
• Scoped styles not applying to slot content → See sfc-scoped-css-slot-content [blocked]
• Tailwind classes missing when built dynamically → See tailwind-dynamic-class-generation [blocked]
• Recursive components not rendering due to name conflicts → See self-referencing-component-name [blocked]

Plugins

• Debugging why global properties cause naming conflicts → See plugin-global-properties-sparingly [blocked]
• Plugin not working or inject returns undefined → See plugin-install-before-mount [blocked]
• Plugin global properties are unavailable in setup-based components → See plugin-prefer-provide-inject-over-global-properties [blocked]
• Plugin type augmentation mistakes break ComponentCustomProperties typing → See plugin-typescript-type-augmentation [blocked]

App Configuration

• App configuration methods not working after mount call → See configure-app-before-mount [blocked]
• Chaining app config off mount() fails because mount returns component instance → See mount-return-value [blocked]
• require.context-based component auto-registration fails in Vite → See dynamic-component-registration-vite [blocked]