Watch array changes without traversing every nested object
Vue 3.5+ lets you limit watcher traversal with a number. Use deep: 1 for an array when you care about its entries, not changes inside each entry.
<script setup>
import { ref, watch } from 'vue'
const items = ref([{ id: 1, name: 'First' }])
watch(items, () => {
console.log('Array changed')
}, { deep: 1 })
// Triggers the watcher
items.value.push({ id: 2, name: 'Second' })
// Does not trigger it
items.value[0].name = 'Renamed'
</script>