Why does the prop value change?

Question

Vue.js

The task is to transfer the default values ​​​​for the object to VUE from the back.
Process.
Passing from Laravel template blade to VUE props

<filter-component
:default_filter="{{json_encode($default_filter)}}" 
>
</filter-component>

In the props component takes the correct values

props: [
'default_filter'
],

There is a Filter object in the VUE date. I want to pass values ​​from props to it. And I do so

resetFilter() {
this.filter = this.default_filter;
},

Values ​​are passed. But there is a problem - the prop values ​​change reactively along with the values ​​from the filter.
Those. for example, I pass from the form to the date and it changes not only in the filter (which is in date) but also in the default_filter (which is props) automatically. Of course, I don't need it. default values ​​should not change. Props is not used anywhere else in the component. Only in the resetFilter() method. It is also not sent to the server. Everything happens in VUE. Why does the option with this.filter = this.default_filter in the method give this behavior? How to fix it? Thank you
<input v-model="filter.name" type="text">

Answer 1

If this.default_filter is an object, then it is passed by reference, which means that changing this.filter will also change the default filter. Copy the object like this: https://developer.mozilla.org/en/docs/Web/JavaScri...

Answer 2

Solution from Dima Polos in the comments

this.filter = Object.assign({}, this.default_filter);