Vue deep copy object not changing value

I have a vue component that has a deep copy of an asset called cachedAsset. It has a value called toDelete to mark a file for soft deletion. I have the following code

markForDeletion(files) {
          const thisComponent = this;
          files.forEach((file) => {
              thisComponent.cachedAsset.files.find(f => file.id === f.id).toDelete = true;
          });
      }

this works as intended it changes the .toDelete to true and the file is filterd out in a process further down the line.

The issue that I am having is with restoring the file back to the component with the following code

restoreFilesFromDeletion(items) {
          items.forEach((item) => {
              this.cachedAsset.files.find(f => item.id === f.id).toDelete = false;
          });
      }

With this code it should set the .toDelete back to false but it is not doing that and I get no errors or anything in the console.

Can anyone tell me why this is not updating the .toDelete back to false when executed .?

Edit 1

this is what I have now

restoreFilesFromDeletion(items) {
          items.forEach((item) => {
              let files = this.cachedAsset.files.find(f => item.id === f.id)
              this.$set(files, 'toDelete', false)
          });
      }

it seems to be setting it but the true still does not change to false ..

am I still missing something ? any further advice that can be given…

Answer

It happens when data is deeply nested. Try this Vue.delete. and also see Reactivity in Depth.