Vue’s reactivity detects many mutations on reactive objects, but immutable updates still make intent clear, play well with computed/watchers, and match what interviewers expect when you discuss state updates.
Arrays
- Add:
items.value = [...items.value, newItem] - Remove:
items.value = items.value.filter((x) => x.id !== id) - Update one:
items.value = items.value.map((x) => x.id === id ? { ...x, done: true } : x)
Objects
Spread shallow copies: user.value = { ...user.value, name: next }. Nested updates may need nested spreads or structured helpers.
When mutation is fine
Local reactive objects from reactive() can use push / direct property sets—Vue tracks them. Prefer immutability for shared store patterns and time-travel debugging.
Self-check
- How do you toggle a todo without mutating the original array in place?
- Why might immutability help with change detection in large apps?
Challenge
Toggle without mutate
- Implement
toggle(id)withmap+ spread. - Confirm the list re-renders and counts update.
Done when: clicking Toggle flips done state using immutable array updates.