Reactive objects with reactive in Vue

Introduction

Reactive objects let Vue track changes in your data automatically. This helps your app update the screen when data changes without extra work.

When you want to create an object whose properties update the UI automatically.

When you need to track changes in nested data inside an object.

When building forms where user input changes multiple fields.

When you want to share reactive state between different parts of your app.

Syntax

Vue

import { reactive } from 'vue';

const state = reactive({
  key1: 'value1',
  key2: 'value2'
});

Use reactive to wrap an object so Vue can track its changes.

The returned object behaves like the original but updates the UI when changed.

Examples

This creates a reactive object user with name and age. Changing user.name updates the UI.

Vue

import { reactive } from 'vue';

const user = reactive({
  name: 'Alice',
  age: 30
});

Reactive object settings tracks theme and notifications preferences.

Vue

const settings = reactive({
  theme: 'dark',
  notifications: true
});

Changing a property on a reactive object triggers UI updates.

Vue

user.age++;
// UI updates automatically to show new age

Sample Program

This Vue component shows a user's name and age. Clicking the button increases the age. The UI updates automatically because user is reactive.

Vue

<template>
  <div>
    <p>User name: {{ user.name }}</p>
    <p>User age: {{ user.age }}</p>
    <button @click="incrementAge">Increase Age</button>
  </div>
</template>

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

const user = reactive({
  name: 'Alice',
  age: 30
});

function incrementAge() {
  user.age++;
}
</script>

Important Notes

Reactive objects track nested properties too, so changes deep inside update the UI.

Do not replace the whole reactive object directly; change its properties instead.

Use reactive for objects, and ref for single primitive values.

Summary

Reactive objects let Vue watch your data and update the UI automatically.

Use reactive to wrap objects you want to track.

Changing properties on reactive objects triggers UI updates without extra code.