vue

defineModel creates a two-way binding prop consumed via v-model in Vue 3.4+. Calling defineModel<string>() creates a modelValue prop, and assigning to model.value emits update:modelValue. Named models like defineModel<number>('count') map to v-model:count on the parent.

ref provides deep reactivity that tracks nested property changes, while shallowRef only triggers reactivity when .value itself is reassigned. Prefer shallowRef for large data structures or when deep tracking is unnecessary, since it avoids the performance cost of deep observation.

Use the Composition API with <script setup lang="ts">, which is the recommended approach for Vue 3. It provides better runtime performance, improved TypeScript type inference, and enables reusable logic through composables. Options API is discouraged for new code.

Use watch with a getter function: watch(() => props.id, (id) => fetchData(id), { immediate: true }). Watching the getter ensures reactivity tracking, since watching props.id directly would capture only the initial value. Vue 3.5 also supports deep watch with a depth limit.

Yes, Suspense handles components with async setup() or top-level await in <script setup>, showing a fallback slot while dependencies resolve. Note that Suspense remains an experimental feature, and it also supports pending, resolve, and fallback events for tracking loading states.

Destructuring a reactive() object or props breaks the reactive proxy connection, so the extracted values stop triggering updates. Use toRefs() to convert properties into refs, or rely on defineProps destructure behavior in Vue 3.5 which the compiler handles specially.