What is `shallowRef`/`shallowReactive` and when should you use them?

shallowRef and shallowReactive create reactive state where only the top-level access is tracked — nested properties are not made reactive automatically. This is a performance optimization for large or complex objects (e.g., big datasets, third-party class instances) where deep reactivity would be wasteful or unnecessary.

import { shallowRef } from 'vue'

const bigData = shallowRef(largeObject)
// mutating bigData.value.someNestedProp won't trigger updates
// but reassigning bigData.value = newObject will

Use these when you control mutations manually (e.g., replacing the whole object) and want to avoid the overhead of deeply proxying large structures.