How to pass an object to a child component and change it inside the child without affecting the parent VUE.js?

Question

JavaScript

Hello, there is a component, it has an "order" parameter,

this parameter is an object and I need to pass it to a child component called modal
. In general, the logic is this: there is a list of orders (orderScroller), when you click on an order, its detailed view (orderDetail) opens and inside this component there is a component with a modal window (modal), where the parameters of the selected order are edited
.

<modal
        v-if="isEdit"
        @closeModal="isEdit = false"
        v-bind:editOrder="order">
</modal>

in the modal component, I get this object, but the documentation says that objects and arrays are passed by reference, okay, then we clone the input parameter, besides changing it immediately is a bad tone, judging by the documentation
in the modal component, I do this

export default {
    props: ['editOrder'],
    data: function () {
        return {
            order: Object.assign({}, this.editOrder)
        }
    }
}

that's it, now I'm working inside the template with the order element, changing its properties (those opened the order edit modal), BUT there is another problem !!
If you see, then in my order, which I give to the modal, inside the object there is an array, inside which the objects (I marked all this on the screen) are the keys pays, products. I need them, I use them when outputting, this is an array of goods, payments, customer fields are also stored, but the fact is that, for some reason, they were passed by reference ..
if I edit the user or product parameters in the modal in the order (in the modal, it means in the context of the modal component with its order parameter), the parent component sees it and changes it immediately, but I don’t need this behavior, I need to work in my scope and don't give anything from the child to the parent reactively when the modal is open.
Yes, I will pass it later, but only after I edit all the parameters and click "save" in the modal, only then I want the changes to be saved in the database and the parent component learns about the changes.
could you tell me the solution of this problem or in general the solution (pattern) of this problem. (I see this solution: pass the order ID for editing in the modal, hang a hook in the modal and asynchronously request the parameters of this order from the database and edit them already, this is much worse than what I want to do (without any extra requests, open the order editing form, maybe everything has already been received)?)
Thank you in advance for your help!

Answer 1

Connect lodash, use cloneDeep , for example.
Or write your own object clone method.