What does reactive() do?

VueJunior~2 min read

reactive() is a function from the Composition API (Vue 3) that makes an object (or array) fully reactive, turning it into a Proxy that tracks reads and changes to its properties.

In simpler terms:

reactive() makes an object "alive": Vue watches all of its fields and updates the UI when they change.

This is the main reactivity tool for objects, arrays, Map, Set, and complex data structures.

What reactive() looks like

import { reactive } from 'vue'

const user = reactive({
  name: 'Alex',
  age: 25
})

Now Vue watches all the object's properties: name, age, as well as any nested objects.

How do you work with reactive?

Reading:

console.log(user.name)

Changing:

user.age = 30

Vue will see the change and update the UI.

Example in a component

vue

<script setup>
import { reactive } from 'vue'

const form = reactive({
  name: '',
  email: ''
})
</script>

<template>
  <input v-model="form.name">
  <input v-model="form.email">
  <p>{{ form.name }} - {{ form.email }}</p>
</template>

When should you use reactive()?

1. When you need to store several fields

Forms, complex objects:

const form = reactive({
  name: '',
  email: '',
  age: null
})

2. When the data has a nested structure

const profile = reactive({
  address: {
    city: '',
    street: ''
  }
})

3. When you need reactive collections

Works with:

Object
Array
Map
Set

Important features of reactive()

1. No need to access it through `.value`

Unlike ref:

user.name = 'John' // correct

2. Do not destructure it directly

Loss of reactivity:

const { name } = user  // reactivity lost

Correct:

import { toRefs } from 'vue'
const { name } = toRefs(user)  // reactive properties

3. You cannot replace the whole object

Like this, reactivity is lost:

user = { name: 'New' } // not allowed

You can only change properties:

Object.assign(user, { name: 'New' }) // correct

How is reactive different from ref?

Characteristic	ref	reactive
Type	any value	only an object/array
Access	`.value`	like a plain object
Replacement	can be replaced entirely	the object cannot be replaced
Primitive types	required	not suitable
Nested structures	no proxy by default	deep reactivity

Example: reactive for an array

const items = reactive([1, 2, 3])

items.push(4)      // reactive
items[0] = 10      // reactive

Summary (perfect for an interview)

reactive() is a Composition API function that turns an object, array, or collection into a reactive Proxy. Vue tracks changes to all properties, including nested ones. Used for forms, complex objects, and data structures. Unlike ref, it does not require .value, but does not let you replace the object entirely.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.