Реактивность не совсем работает vue 3?

Question

[Вячеслав]

Добрый день есть проблемка не пойму по чему не работает:

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,
       }
  },
}

Вот часть кода он не работает как я хочу , нет реактивности в computed. Когда из вне меняю items - copyDB меняется. а MyTables нет

Answer 1

[0xD34F]

Открываем раздел документации, посвящённый реактивности, и читаем там, что

Отследить переназначение локальных переменных <...> не получится, такого механизма просто нет в JavaScript. Можно лишь отслеживать изменения свойств объектов.

Так что менять надо внутреннее содержимое, а не заменять объект на полностью новый. Вместо reactive следует использовать ref (соответственно, вместо copyDB = будет copyDB.value =), или же удалять существующие элементы массива, и добавлять новые:

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