Vue reactive Explained — Deep Reactive State Management

In this tutorial, you will learn about Vue reactive Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Vue reactive makes entire objects deeply reactive using JavaScript Proxies, tracking property access and mutations to trigger automatic view updates.

What You'll Learn

• How reactive wraps objects
• Deep vs shallow reactivity
• readonly wrapper
• markRaw to opt out
• Reactive limitations

Why It Matters

Reactive is the foundation of Vue's data system. It makes state changes automatically reflect in the DOM without manual synchronization, but requires understanding its proxy-based nature.

<template>
  <div>
    <p>{{ user.name }} ({{ user.role }})</p>
    <form @submit.prevent="updateUser">
      <input v-model="user.name" />
      <select v-model="user.role">
        <option>Admin</option>
        <option>User</option>
      </select>
      <button type="submit">Update</button>
    </form>
    <h3>Settings (readonly)</h3>
    <p>Theme: {{ settings.theme }}</p>
  </div>
</template>

<script setup>
import { reactive, readonly, markRaw } from "vue";

const user = reactive({
  name: "Alice",
  role: "Admin",
  metadata: { lastLogin: "2026-06-28" },
});

const settings = readonly({
  theme: "dark",
  language: "en",
  notifications: true,
});

const nonReactive = markRaw({ value: "unchanged" });
</script>

Expected output: user is deeply reactive (nested metadata too), settings is readonly and cannot be mutated, markRaw prevents reactivity.