vue

defineModel creates a two-way binding prop consumed via v-model, available in Vue 3.4+. Call const model = defineModel<string>() for the default modelValue, or pass a name like defineModel<number>('count') for named models such as v-model:count.

ref provides deep reactivity that tracks nested property changes, while shallowRef only triggers reactivity when .value is reassigned. Prefer shallowRef for large data structures where deep tracking is unnecessary, since it reduces reactivity overhead.

Yes, Vue 3.3+ supports generic components via the generic attribute on the script setup tag, such as generic="T extends string | number". This lets props like items: T[] and selected: T share an inferred type parameter.

In Vue 3.5+, destructure defineProps directly with defaults, like const { count = 0 } = defineProps<{ count?: number }>(). In Vue 3.4 and below, use withDefaults with factory functions for array or object defaults.

Reactivity is lost when a composable returns a reactive() object that gets destructured. Return a plain object containing refs instead, and use toValue() to accept refs, getters, or plain values as composable inputs.

Use Suspense when components have async setup() or top-level await in script setup, providing a fallback template for loading states. Note that Suspense is still an experimental feature in Vue 3.