Binding v-model to a property

[hanspr]

I'm new to Vue so, maybe this is a known limitation of the Vue framework.

If I use vue-datepicker inside a page and bind v-model to a data property, everything works as expected.

<VueDatePicker v-model="data['date']"/>

data() {
  return {
    data: {
      date: new Date();
    },
  }
}

But if I place VueDatePicker inside another component and then bind v-model to the property:

<VueDatePicker v-model="data['date']"/>

props: {
  data: {
    type: Object,
    required: false,
    default: () => {}
  },
},

• values are internally updated correctly
• but the calendar ui does not update the changes
• date is not updated in the input text box, cell in the calendar does not shows selected

---

To make it work, I had to copy the property to a data object in the mounted method and bind v-model to the data (localdata property)

<VueDatePicker v-model="localdata['date']"/>

props: {
  data: {
    type: Object,
    required: false,
    default: () => {}
  },
},
data() {
  return {
    localdata: {}
  }
},

mounted() {
  this.localdata = Object.assign({},this.$props.data);
},

---

So, am I doing it wrong?

This is how it has to be done?

Or, this could be fixed inside vue-datepicker to work properly with properties inside another component?

Thank you for your grate component.