Vue 3 reactivity not triggering on array index assignment

Medium staging Vue
706
views
8
votes

Directly assigning a value to an array index (e.g., items[0] = newValue) does not trigger reactivity in Vue 3's Composition API. The UI does not update even though the data changes.

This is expected behavior due to Vue's proxy-based reactivity system, but it's a common pitfall for developers migrating from Vue 2.

A
Admin User
Jul 28, 2026

Solutions

1
8
A
Admin User Jul 28, 2026

Use Vue.set() or the reactive array methods like .splice() instead of direct index assignment.

items.splice(index, 1, newValue);
// or
items.push(newValue);

Have a solution to share?

Sign in to submit a solution