vue-expert

defineModel creates a v-model binding in script setup without manual props and emits. Call const modelValue = defineModel<string>() for the default model, or pass a name like defineModel<number>("count") for named models. It requires Vue 3.4 or later.

Use defineStore with a setup function returning refs, computed values, and functions. In components, destructure reactive state via storeToRefs(store) since direct destructuring loses reactivity. Add pinia-plugin-persistedstate to persist store state.

ref wraps any value and is accessed via .value in JavaScript but auto-unwraps in templates. reactive only works on objects and loses reactivity when reassigned or destructured, so ref is preferred for primitives and replaceable values.

Yes, Nuxt 4 auto-imports Vue functions like ref and computed, Nuxt utilities like useRoute and useFetch, and any files in the composables directory by filename. Explicit imports are unnecessary in pages and components.

Watching a primitive property directly like watch(state.count, ...) fails because the value is not reactive. Use a getter function instead: watch(() => state.count, callback), which tracks the dependency correctly.

useFetch is a convenience wrapper around useAsyncData for URL-based fetching with options like lazy, server, and transform. useAsyncData suits arbitrary async logic but requires a unique key per page or component to avoid cache collisions.