vue-expert

Vue reactivity issues usually come from destructuring reactive() objects directly, adding new properties, or mutating arrays incorrectly. Use toRefs() for destructuring, reactive() for objects, and enable deep watching with { deep: true } where needed.

Pinia state resets on navigation when stores are not properly registered or when direct mutations bypass actions. Use $patch for batch updates, define actions for business logic, and add a persistence plugin if state must survive reloads.

Hydration mismatches occur when server-rendered HTML differs from client output, often caused by Date(), Math.random(), or browser APIs like window and localStorage running during SSR. Wrap client-only code in <ClientOnly> or run it inside onMounted.

Use ref for primitives and values you pass around, accessing them with .value in script. Use reactive for objects you keep intact, and prefer shallowRef or shallowReactive for large data structures to avoid deep tracking overhead.

Mixing Options API with Composition API in the same component is an anti-pattern that causes confusion with this context and lifecycle handling. Vue 3 favors <script setup> with composables, and mixins should be replaced by composables.