object data binding

[a-bayat]

I have something like bellow code

<template>
  <div>
    <persian-datetime-picker v-model="formdata.datetime"></persian-datetime-picker>
  </div>
</template>

<script>
import PersianDatetimePicker from 'vue-persian-datetime-picker';

export default {
  components: {
    PersianDatetimePicker,
  },
  data() {
    return {
      formdata: {
        datetime: '2024-02-12', 
      },
    };
    },
  },
};
</script>

the problem is if I use v-model="formdata.datetime" it would not work, but if i change formdata.datetime object to datetime and in data() change formdata: { dattime:'2024-02-12' to datetime:'2024-02-12' it will work! what is the problem with this way v-model="formdata.datetime"?