How to watch arrays in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Watching arrays for changes is essential when you need to react to modifications in list data, whether items are added, removed, or updated.
As the creator of CoreUI, a widely used open-source UI library, I’ve implemented array watchers extensively throughout my 11 years of Vue development.
The most reliable approach is using the watch function with the deep option set to true, which monitors nested changes within array items.
This method ensures all array mutations trigger your callback function.
Use the watch function with deep option to monitor array changes in Vue 3.
import { ref, watch } from 'vue'
export default {
setup() {
const items = ref([
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' }
])
watch(items, (newValue, oldValue) => {
console.log('Array changed:', newValue)
}, { deep: true })
return { items }
}
}
Here the watch function monitors the items ref with deep: true option enabled. This ensures the watcher triggers not only when the array reference changes, but also when individual properties of array items are modified. The callback receives both new and old values, allowing you to compare changes and react accordingly.
Best Practice Note:
This is the same approach we use in CoreUI Vue components for tracking changes in data tables and dynamic lists.
Deep watchers can be expensive for large arrays, so consider using watchEffect for simpler cases or watching specific array properties individually for better performance.
