# Vue 3 Script Setup and defineModel in 2026: Modern Syntax and Interview Questions

> Master Vue 3 script setup syntax and defineModel for two-way binding. Learn reactive props destructure, TypeScript patterns, and prepare for Vue interview questions.

- Published: 2026-09-18
- Updated: 2026-09-18
- Author: Anthony Fillion-Maillet
- Tags: vue, vue3, script-setup, definemodel, composition-api, typescript
- Reading time: 9 min

---

Vue 3 script setup syntax transforms how components are written by eliminating boilerplate and improving TypeScript integration. Combined with `defineModel`, introduced in Vue 3.3 as experimental and stabilized in Vue 3.4, building components with two-way data binding requires far less code than the Options API equivalent.

> **Vue 3.5 Reactive Props Destructure**
>
> Starting in Vue 3.5, props can be destructured directly from `defineProps` while preserving reactivity. This eliminates the need for `toRefs` in most cases.

## Script Setup Fundamentals in Vue 3.5

The `<script setup>` syntax is compile-time sugar for the Composition API inside Single File Components. Variables declared at the top level are automatically exposed to the template, and imports are directly usable without registration.

```vue
<!-- UserCard.vue -->
<script setup lang="ts">
import { ref, computed } from 'vue'
import type { User } from '@/types'

// Props with TypeScript interface
const props = defineProps<{
  user: User
  showEmail?: boolean
}>()

// Reactive state
const isExpanded = ref(false)

// Computed property
const displayName = computed(() => {
  return `${props.user.firstName} ${props.user.lastName}`
})

// Event emitter with typed payload
const emit = defineEmits<{
  select: [userId: string]
  delete: [userId: string]
}>()

// Methods are plain functions
function handleSelect() {
  emit('select', props.user.id)
}
</script>

<template>
  <div class="user-card" @click="handleSelect">
    <h3>{{ displayName }}</h3>
    <p v-if="showEmail">{{ user.email }}</p>
    <button @click.stop="isExpanded = !isExpanded">
      {{ isExpanded ? 'Collapse' : 'Expand' }}
    </button>
  </div>
</template>
```

The compiler handles export statements and component registration automatically. This reduces the cognitive load compared to explicitly returning values from a `setup()` function.

## Reactive Props Destructure (Vue 3.5+)

Before Vue 3.5, destructuring props broke reactivity because JavaScript destructuring creates a snapshot of the value at that moment. Vue 3.5 introduces compiler-level tracking that preserves reactivity for destructured props.

```vue
<!-- SearchInput.vue -->
<script setup lang="ts">
import { watch } from 'vue'

// Destructure with defaults - stays reactive in 3.5+
const { query = '', placeholder = 'Search...' } = defineProps<{
  query?: string
  placeholder?: string
}>()

// Watch works on destructured props
watch(
  () => query,
  (newQuery) => {
    console.log('Query changed:', newQuery)
  }
)
</script>

<template>
  <input
    :value="query"
    :placeholder="placeholder"
    @input="$emit('update:query', ($event.target as HTMLInputElement).value)"
  />
</template>
```

This syntax requires Vue 3.5 or later. The [Vue 3.5 release announcement](https://blog.vuejs.org/posts/vue-3-5) documents the complete list of reactive props destructure behavior.

## defineModel for Two-Way Binding

Before `defineModel`, implementing `v-model` on a custom component required declaring a prop and emitting an update event manually. This pattern appears in countless Vue codebases:

```vue
<!-- The old way - verbose but explicit -->
<script setup lang="ts">
const props = defineProps<{ modelValue: string }>()
const emit = defineEmits<{ 'update:modelValue': [value: string] }>()

function updateValue(event: Event) {
  emit('update:modelValue', (event.target as HTMLInputElement).value)
}
</script>
```

With `defineModel`, the same component becomes significantly shorter:

```vue
<!-- TextInput.vue -->
<script setup lang="ts">
// defineModel creates a ref that syncs with v-model
const model = defineModel<string>({ default: '' })
</script>

<template>
  <input
    v-model="model"
    type="text"
    class="text-input"
  />
</template>
```

The parent component uses standard `v-model` syntax:

```vue
<!-- ParentForm.vue -->
<script setup lang="ts">
import { ref } from 'vue'
import TextInput from './TextInput.vue'

const username = ref('')
</script>

<template>
  <TextInput v-model="username" />
  <p>Username: {{ username }}</p>
</template>
```

`defineModel` returns a ref that stays synchronized with the parent's bound value. Mutations to this ref automatically emit the update event.

## Named Models and Multiple v-model Bindings

Components sometimes need multiple two-way bindings. Vue supports named `v-model` bindings, and `defineModel` handles them by accepting a name argument.

```vue
<!-- DateRangePicker.vue -->
<script setup lang="ts">
// Named models for multiple v-model bindings
const startDate = defineModel<Date>('start', { required: true })
const endDate = defineModel<Date>('end', { required: true })

// Validation computed
const isValidRange = computed(() => {
  if (!startDate.value || !endDate.value) return true
  return startDate.value <= endDate.value
})
</script>

<template>
  <div class="date-range-picker">
    <input
      type="date"
      :value="startDate?.toISOString().split('T')[0]"
      @input="startDate = new Date(($event.target as HTMLInputElement).value)"
    />
    <span>to</span>
    <input
      type="date"
      :value="endDate?.toISOString().split('T')[0]"
      @input="endDate = new Date(($event.target as HTMLInputElement).value)"
    />
    <p v-if="!isValidRange" class="error">End date must be after start date</p>
  </div>
</template>
```

The parent binds both models:

```vue
<DateRangePicker v-model:start="filterStart" v-model:end="filterEnd" />
```

## v-model Modifiers with defineModel

Vue's built-in modifiers like `.trim`, `.number`, and `.lazy` work automatically with `defineModel`. Custom modifiers require explicit handling through the second element of the returned tuple.

```vue
<!-- CurrencyInput.vue -->
<script setup lang="ts">
// Access modifiers via the second return value
const [model, modifiers] = defineModel<number>({
  default: 0,
  // Transform functions for custom modifiers
  set(value) {
    // Round to 2 decimal places if 'round' modifier is present
    if (modifiers.round) {
      return Math.round(value * 100) / 100
    }
    return value
  }
})
</script>

<template>
  <div class="currency-input">
    <span>$</span>
    <input
      type="number"
      step="0.01"
      :value="model"
      @input="model = parseFloat(($event.target as HTMLInputElement).value) || 0"
    />
  </div>
</template>
```

Usage with the custom modifier:

```vue
<CurrencyInput v-model.round="price" />
```

## TypeScript Patterns for Script Setup

Type safety in `<script setup>` components relies on generics passed to compiler macros. The pattern varies slightly between props, emits, and models.

```vue
<!-- GenericList.vue -->
<script setup lang="ts" generic="T extends { id: string }">
import { computed } from 'vue'

// Generic component props
const props = defineProps<{
  items: T[]
  selected?: T
}>()

const emit = defineEmits<{
  select: [item: T]
  remove: [id: string]
}>()

// Slots can be typed too
defineSlots<{
  default: (props: { item: T; index: number }) => any
  empty: () => any
}>()

const hasItems = computed(() => props.items.length > 0)
</script>

<template>
  <ul v-if="hasItems">
    <li
      v-for="(item, index) in items"
      :key="item.id"
      :class="{ selected: selected?.id === item.id }"
      @click="emit('select', item)"
    >
      <slot :item="item" :index="index">
        {{ item.id }}
      </slot>
    </li>
  </ul>
  <div v-else>
    <slot name="empty">No items</slot>
  </div>
</template>
```

Generic components, available since Vue 3.3, enable reusable typed components without sacrificing type inference in the consuming code. For deeper patterns, the [Vue documentation on TypeScript](https://vuejs.org/guide/typescript/composition-api.html) covers edge cases.

## Common Interview Questions on Script Setup

Interviewers testing Vue knowledge often focus on the differences between script setup and the Options API, as well as the mechanics of reactivity.

**Question: Why does destructuring props break reactivity, and how does Vue 3.5 solve this?**

In JavaScript, destructuring creates new variables holding the values at destructure time. If `props.count` changes later, a destructured `const { count } = props` still holds the old value. Vue 3.5's compiler transforms the destructured variables into getters that re-evaluate when accessed, preserving reactivity without runtime overhead.

**Question: What happens under the hood when defineModel is used?**

The compiler expands `defineModel` into a prop declaration and an emit registration. At runtime, it creates a ref whose getter reads the prop value and whose setter calls `emit('update:modelValue', newValue)`. This ref is not a true copy of the prop but a proxy that forwards reads and writes appropriately.

**Question: When should a component use script setup versus a regular setup function?**

Script setup is preferred for most single-file components because it reduces boilerplate and improves IDE support. A regular `setup()` function is necessary when the component needs to expose methods to parent components via `defineExpose` in complex patterns, or when building renderless components that return render functions directly. For interview preparation, explore more [Vue composables patterns](/technologies/vue-nuxt/interview-questions/vue-composables).

## Migrating from Options API to Script Setup

Existing codebases often contain Options API components that benefit from migration. The conversion follows a predictable pattern:

```vue
<!-- Before: Options API -->
<script lang="ts">
import { defineComponent, PropType } from 'vue'

export default defineComponent({
  props: {
    items: { type: Array as PropType<string[]>, required: true }
  },
  emits: ['select'],
  data() {
    return { searchTerm: '' }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item =>
        item.toLowerCase().includes(this.searchTerm.toLowerCase())
      )
    }
  },
  methods: {
    selectItem(item: string) {
      this.$emit('select', item)
    }
  }
})
</script>
```

```vue
<!-- After: Script Setup -->
<script setup lang="ts">
import { ref, computed } from 'vue'

const props = defineProps<{ items: string[] }>()
const emit = defineEmits<{ select: [item: string] }>()

const searchTerm = ref('')

const filteredItems = computed(() =>
  props.items.filter(item =>
    item.toLowerCase().includes(searchTerm.value.toLowerCase())
  )
)

function selectItem(item: string) {
  emit('select', item)
}
</script>
```

The migrated version is shorter and type inference works without `PropType` casts. The Vue team provides [vue-codemod](https://github.com/vuejs/vue-codemod) for automated migrations, though manual review remains necessary for complex components.

## Performance Considerations in Script Setup

Script setup components compile to more efficient code because the compiler knows the exact shape of the component at build time. Specifically:

- Template bindings resolve at compile time rather than runtime property lookup
- Unused imports are tree-shaken more effectively
- The lack of a wrapping function reduces closure overhead

For applications prioritizing bundle size, script setup with [Vapor Mode](https://blog.sparkles-editor.com/en/blog/vue-3-6-rc-upgrade-guide) (available in Vue 3.6+) eliminates the virtual DOM entirely for opted-in components, generating direct DOM operations instead.

## Key Takeaways for Vue 3 Script Setup and defineModel

- Script setup reduces component boilerplate by automatically exposing top-level bindings to templates and handling component registration
- `defineModel` replaces the manual prop + emit pattern for `v-model`, returning a ref that syncs with the parent's bound value
- Vue 3.5 introduces reactive props destructure, allowing `const { prop } = defineProps()` without losing reactivity
- Named models support multiple `v-model` bindings on a single component using `defineModel('name')`
- TypeScript generics work with `defineProps`, `defineEmits`, `defineSlots`, and generic components via the `generic` attribute
- Migration from Options API follows a mechanical pattern: data becomes refs, computed stays computed, methods become functions, and the compiler handles exports

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/en/blog/vue-nuxt/vue-3-script-setup-definemodel-2026