I am in Vue.js and trying to correct inappropriate quantity input value like "12jd". They belong to item objects which are in a array literal called store (which is defined in data( ) return). The problematic code is in the input event handler function which gets the item's index - idx in which the bad quantity was written.

Everything goes well until I try to assign the proper array, with no bad quantity, to the original store in the this context. This part does not work, no value gets changed in the original.

failed(idx) {

  const storeCopy = lodash.cloneDeep(this.store); //deep copy the store literal

  const unmodified = storeCopy.filter((item) => item.id !== idx);

  const modified = storeCopy.filter((item) => item.id === idx)[0]; //slice out the relevant part
  const modifiedCopy = JSON.parse(JSON.stringify(modified)); //deep copy the item object

  const input = parseInt((" " + modifiedCopy.quantity).slice(1)); //get parsed input from deep copied string

  const store = [
    Object.defineProperty(modifiedCopy, "quantity", {
      value: isNaN(input) ? 0 : input,
    }),
    ...unmodified,
  ]; //correct the input and put it back to the array
  console.log(store);

  this.store.length = 0; //from this it's messed up
  this.store = store;
}

I do deep copy even three times, still the problem backpropagates to console logged array after uncommenting the last two lines. Without them it's fine.

Why does the reference not get garbage collected, after setting this.store.length to 0, or this.store to [] at all? What do I miss out, is there any original reference left in the new array maybe? Any help appreciated! Thanks

Edited

Here's the output without then with the two last line:

I don't even understand who it's possible that store in the local scope is affected backwards, by inserting those two lines. Anyways It gets restored somehow to the bad value "12jd".

Even the log looks different, I have to click on the three dots to reveal the values.