I am facing an issue with passing a deep object from parent to child components in Vue.js. I have created a component for my forms where I pass the main object as props along with a JSON containing each form input's data. The challenge arises when trying to integrate v-model with nested properties. Here is how it looks:
**parent**: <custom-input :personInfo="personInfo" :items="items"> </custom-input>
**child**: <input v-model="personInfo[propertyName]"/>
items: [
{property: 'birth.date', ...}
]
personInfo : {
name: '',
birth: {
date: ''
}
}
When trying to set the v-model for 'birth.date', I encounter an error. How can I correctly pass and access this deep object in both the parent and child component?
To better understand the issue, here is a link to a code sandbox showcasing the problem: Codesandbox