vue-debug-guides
installsforks
How to install vue-debug-guides?
hyf0/vue-skills/vue-debug-guides
$npx -y skills add hyf0/vue-skills --skill vue-debug-guidesVue 3 debugging and error handling for runtime errors, warnings, async failures, and SSR/hydration issues. Use when diagnosing or fixing Vue issues.
SKILL.md
| 1 | Vue 3 debugging and error handling for runtime issues, warnings, async failures, and hydration bugs. |
| 2 | For development best practices and common gotchas, use `vue-best-practices`. |
| 3 | |
| 4 | ### Reactivity |
| 5 | - Tracing unexpected re-renders and state updates → See [reactivity-debugging-hooks](reference/reactivity-debugging-hooks.md) |
| 6 | - Ref values not updating due to missing .value access → See [ref-value-access](reference/ref-value-access.md) |
| 7 | - State stops updating after destructuring reactive objects → See [reactive-destructuring](reference/reactive-destructuring.md) |
| 8 | - Refs inside arrays, Maps, or Sets not unwrapping → See [refs-in-collections-need-value](reference/refs-in-collections-need-value.md) |
| 9 | - Nested refs rendering as [object Object] in templates → See [template-ref-unwrapping-top-level](reference/template-ref-unwrapping-top-level.md) |
| 10 | - Reactive proxy identity comparisons always return false → See [reactivity-proxy-identity-hazard](reference/reactivity-proxy-identity-hazard.md) |
| 11 | - Third-party instances breaking when proxied → See [reactivity-markraw-for-non-reactive](reference/reactivity-markraw-for-non-reactive.md) |
| 12 | - Watchers only firing once per tick unexpectedly → See [reactivity-same-tick-batching](reference/reactivity-same-tick-batching.md) |
| 13 | |
| 14 | ### Computed |
| 15 | - Computed getter triggers mutations or requests unexpectedly → See [computed-no-side-effects](reference/computed-no-side-effects.md) |
| 16 | - Mutating computed values causes changes to disappear → See [computed-return-value-readonly](reference/computed-return-value-readonly.md) |
| 17 | - Computed value never updates after conditional logic → See [computed-conditional-dependencies](reference/computed-conditional-dependencies.md) |
| 18 | - Sorting or reversing arrays breaks original state → See [computed-array-mutation](reference/computed-array-mutation.md) |
| 19 | - Passing parameters to computed properties fails → See [computed-no-parameters](reference/computed-no-parameters.md) |
| 20 | |
| 21 | ### Watchers |
| 22 | - Async operations overwriting with stale data → See [watch-async-cleanup](reference/watch-async-cleanup.md) |
| 23 | - Creating watchers inside async callbacks → See [watch-async-creation-memory-leak](reference/watch-async-creation-memory-leak.md) |
| 24 | - Watcher never triggers for reactive object properties → See [watch-reactive-property-getter](reference/watch-reactive-property-getter.md) |
| 25 | - Async watchEffect misses dependencies after await → See [watcheffect-async-dependency-tracking](reference/watcheffect-async-dependency-tracking.md) |
| 26 | - DOM reads are stale inside watcher callbacks → See [watch-flush-timing](reference/watch-flush-timing.md) |
| 27 | - Deep watchers report identical old/new values → See [watch-deep-same-object-reference](reference/watch-deep-same-object-reference.md) |
| 28 | - watchEffect runs before template refs update → See [watcheffect-flush-post-for-refs](reference/watcheffect-flush-post-for-refs.md) |
| 29 | |
| 30 | ### Components |
| 31 | - Child component throws "component not found" error → See [local-components-not-in-descendants](reference/local-components-not-in-descendants.md) |
| 32 | - Click listener doesn't fire on custom component → See [click-events-on-components](reference/click-events-on-components.md) |
| 33 | - Parent can't access child ref data in script setup → See [component-ref-requires-defineexpose](reference/component-ref-requires-defineexpose.md) |
| 34 | - HTML template parsing breaks Vue component syntax → See [in-dom-template-parsing-caveats](reference/in-dom-template-parsing-caveats.md) |
| 35 | - Wrong component renders due to naming collisions → See [component-naming-conflicts](reference/component-naming-conflicts.md) |
| 36 | - Parent styles don't apply to multi-root component → See [multi-root-component-class-attrs](reference/multi-root-component-class-attrs.md) |
| 37 | |
| 38 | ### Props & Emits |
| 39 | - Variables referenced in defineProps cause errors → See [prop-defineprops-scope-limitation](reference/prop-defineprops-scope-limitation.md) |
| 40 | - Component emits undeclared event causing warnings → See [declare-emits-for-documentation](reference/declare-emits-for-documentation.md) |
| 41 | - defineEmits used inside function or conditional → See [defineEmits-must-be-top-level](reference/defineEmits-must-be-top-level.md) |
| 42 | - defineEmits has both type and runtime arguments → See [defineEmits-no-runtime-and-type-mixed](reference/defineEmits-no-runtime-and-type-mixed.md) |
| 43 | - Native event listeners not responding to clicks → See [native-event-collision-with-emits](reference/native-event-collision-with-emits.md) |
| 44 | - Component event fires twice when clicking → See [undeclared-emits-double-firing](reference/undeclared-emits-double-firing.md) |
| 45 | |
| 46 | ### Templates |
| 47 | - Getting template compilation errors with statements → See [template-expressions-restrictions](reference/template-expressions-restrictions.md) |
| 48 | - "Cannot read property of undefined" runtime errors → See [v-if-null-check-order](reference/v-if-null-check-o |
People who liked this also viewed
6 picksType
- azure-storageAzure Storage Services including Blob Storage, File Shares, Queue Storage, Table Storage, and Data Lake. Answers questions about storage access tiers (hot, cool, cold, archive), when to use each tier,SkillsJul 2026
- supabase-postgres-best-practicesPostgres performance optimization and best practices from Supabase. Use this skill when writing, reviewing, or optimizing Postgres queries, schema designs, or database configurations.SkillsJul 2026
- supabaseUse when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge Functions, Realtime, Storage, Vectors, Cron, Queues); client libraries and SSR integrations (supabase-js, SkillsJul 2026
- convex-quickstartCreates or adds Convex to an app. Use for new Convex projects, npm create convex@latest, frontend setup, env vars, or the first npx convex dev run.SkillsJul 2026
- convex-performance-auditAudits Convex performance for reads, subscriptions, write contention, and function limits. Use for slow features, insights findings, OCC conflicts, or read amplification.SkillsJul 2026
- convex-setup-authSets up Convex auth, identity mapping, and access control. Use for login, auth providers, users tables, protected functions, or roles in a Convex app.SkillsJul 2026
