Reactivity not quite working vue 3?

Question

Vue.js

Good afternoon, I have a problem, I don’t understand why it doesn’t work:

function addFlags(db) {
  let index=0
  let newdb = []
  db.forEach(item=>{
      let tmpobj = Object.assign({},item)
      tmpobj.__uniqID = index
      index++;
      newdb.push(tmpobj)
  })
  return newdb
}

export default {
  props: {
    'items': { type: Array, default: () => [] },
  },
 
  setup(props){
      
       let copyDB=reactive(addFlags(props.filterExt(props.items)))

      watch(props.items, ()=>{
         copyDB = addFlags(props.items)
       }, { deep: true })

       const MyTables = computed({ get: ()=>{
                 return copyDB
       } })
          
       return {
         MyTables,
         copyDB,
       }
  },
}

Here is part of the code, it does not work as I want, there is no reactivity in computed. When from outside I change items - copyDB changes. and MyTables is not

Answer 1

We open the section of the documentation dedicated to reactivity, and read there that

Tracking the reassignment of local variables <...> will not work, such a mechanism simply does not exist in JavaScript. You can only track changes in the properties of objects.

So you need to change the internal contents, and not replace the object with a completely new one. You should use ref instead of reactive, or remove existing array elements and add new ones:

copyDB.splice(0, copyDB.length, ...addFlags(props.items));