I have a sticky problem with vue app.

In my methods I need to duplicate temporally a data variable:

this.El_selected = this.dessign[index].rows[key].element

Then, whenever I make a change in "El_selected", the change is also made in "dessign", which is not what I need.

I tried to use an intermediate local variable with the same results.

let el_temp = null;
el_temp = this.dessign[index].rows[key].element
this.El_selected = el_temp

Even , I tried split in two different methods, but did not succeed.

EDIT (as Creative Learner request. thank you): The data element:

  data() {
return {
  dessign : [],
  eSelected : [0,0],
  elements : [],
  is_selected : false,
  open : false,
  category : null,
  categories_options : [],
  El_selected : null,
  Op_selected : { oscilobatiente : null, mano : null, maneta : null}
};

},

The method code:

 setId(index,key){
  let el_temp = null;
  this.eSelected = [index,key]
  this.category = this.Op_selected = null

  el_temp = this.dessign[index].rows[key].element
  this.El_selected = el_temp
  this.Op_selected = {
    oscilobatiente : this.El_selected.oscilobatiente,  
    mano : this.El_selected.mano,
    maneta : this.El_selected.maneta
  }
  this.El_selected.oscilobatiente = this.El_selected.oscilobatiente != null ? 1 : 0;
  this.El_selected.mano = this.El_selected.mano != null ? 1 : 0;
  this.El_selected.maneta = this.El_selected.maneta != null ? 1 : 0;
},

The last three lines change the value in "dessign". (Checked with VueDevTools)

EDIT 2 ::

the method is called from Button that toggle a sidebar

                  <b-button
                    v-b-toggle.sidebar-right
                    variant="default"
                    @click="setId(index,key)"
                  >
                    <feather-icon icon="PlusSquareIcon" size= 24 />
                  </b-button>