`shallowReactive()`

A reactive proxy that tracks only top-level property changes.

Since Vue 3.0 Spec ↗

Syntax

shallowReactive<T extends object>(target: T): T

Parameters

Name	Type	Required	Description
`target`	`object`	No	The object to wrap shallowly.

Returns

T — Reactive only at the root level.

Examples

<script setup lang="ts">
import { shallowReactive } from 'vue';

const state = shallowReactive({ nested: { count: 0 }, label: 'a' });
state.label = 'b';            // reactive
state.nested.count++;         // NOT reactive
state.nested = { count: 1 };  // reactive (root replacement)
</script>

Notes

Only mutations to root-level properties trigger updates; nested objects keep their original (non-proxied) values. Useful for performance with large objects where deep tracking is wasteful. Prefer reactive() when you need deep reactivity.