V-model is updating unreferenced state data

Question

I am trying to copy an object in the vuex store to a local component object so that I can change it locally and not modify the store state object. However, when I associate the local object with a textarea v-model, it changes the store state data even though it is not directly referenced. I am not sure how this is happening or even possible.

<v-textarea v-model="currentObj.poltxt" solo light></v-textarea>

  watch: { //watch for current UID changes
    "$store.state.currentUID"(nv) {
      //Clearing the local temporary object
      this.currentObj = {};
      //Moving the store state data into the local object
      this.currentObj = this.$store.state.docuMaster[this.$store.state.currentUID];
    }
  }

The watch function is executing and when I console log this.$store.state.docuMaster[this.$store.state.currentUID] I can see that v-model is directly updating it even though its referencing currentObj. Any idea why this is happening? The text box is not referencing the store in any other place in code.

Answer 1

If this.$store.state.docuMaster[this.$store.state.currentUID] is not a nested object then try using

//Moving the store state data into the local object
      this.currentObj = Object.assign({}, this.$store.state.docuMaster[this.$store.state.currentUID]);

If this.$store.state.docuMaster[this.$store.state.currentUID]) is a nested object then you got to do deep clone

this.currentObj = JSON.parse(JSON.stringify(this.$store.state.docuMaster[this.$store.state.currentUID]));

Note: Nested object in the sense I mean

docuMaster: {
 UID: {
  ...
   xyz: {}
 },
....
}

Not a nested obj means

docuMaster: {
 UID: {
  //no inner objects
 },
....
}