v-for loop with forms is not assigning the values

Question

I have an error

Cannot assign to read only property 'description' of object '#<Object>'

when trying to change the value of description.

I have an array of objects [{description, amount}]. It is passed from the parent component. I guess the problem is with the v-for loop. Why do I get this error and how could I solve it?

    props: {
        data: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            object: {...this.data.object},
        };
    },

            <template v-for="(item, index) in object.items">
                  <input v-model="item.description"/>

Answer 1

Okay, I fixed the issue. I deep cloned the object and it works good now.