How can I avoid reactivity in vue

Question

I'm assigning an object from property 'model' (which i get from blade attribute model in Laravel) to data attribute model. Later data attribute model changes since it's binded to form input field. But prop 'model' also changes. They are the same object. How can I avoid that behavior? I need property 'model' to stay as it was when mounted. I tried this in created() method and in data():

 Vue.set(this, 'model', this.transferredData.model);

That didn't help

Answer 1

You can use spread syntax to create a new object so it will mutate the newly created object only.

Vue.set(this, 'model', {...this.transferredData.model});
// or Vue.set(this, 'model', Object.assign({}, this.transferredData.model)); 

NOTE: If it is nested then you have to deconstruct recursively or you can use:

Vue.set(this, 'model',JSON.parse(JSON.stringify(this.transferredData.model)))