vue

defineModel replaces the manual modelValue prop plus update:modelValue emit with a single two-way binding declaration. Call const model = defineModel<string>() in script setup, then bind with v-model in the template; use named models like defineModel('firstName') for multiple bindings.

Mount components with @vue/test-utils, pass props and slots, then trigger interactions and assert on emitted events or rendered output. Colocate tests as Component.spec.ts files and mock vue-router's useRoute and useRouter when components depend on routing.

Reactive props destructuring works in Vue 3.5 and later, letting you destructure defineProps with defaults while keeping reactivity. When passing destructured props to watchers, wrap them in a getter like watch(() => count, ...) so changes are tracked.

Destructuring a reactive() object extracts raw values disconnected from the proxy, so updates no longer trigger. Use toRefs() to convert properties back into refs, or prefer ref() for individual state values instead of reactive().

Use composables (use* functions) for stateful logic involving refs, lifecycle hooks, or watchers, and reserve utils for pure functions like formatters and validators with no side effects. Check VueUse first since most common composable patterns are already implemented there.

Create a Symbol cast as InjectionKey<T> and share it between provider and consumer files. provide(key, value) and inject(key) then carry full type information, and inject returns T | undefined unless you supply a default value.