multiple ion-datetime-button and ion-datetime created dynamically inside v-for

Question

I am trying to create multiple instances of ion-datetimeButton and ion-datetime dynamically inside the v-for with ion-buttons

<ion-item v-for="(task, index) in alltasks">
 <ion-datetime-button datetime="datetime_{{ index }}"></ion-datetime-button>
 <ion-modal :keep-contents-mounted="true">
    <ion-datetime id="datetime_{{ index }}" ref="datetimeRef" presentation="date-time" :value="functionToGetTimeForThisTask()" preferWheel="true">
            <ion-buttons slot="buttons">
                <ion-button color="danger" @click="cancel()">Cancel</ion-button>
                <ion-button color="primary" @click="confirm()">Done</ion-button>
            </ion-buttons>
     </ion-datetime>
  </ion-modal>
</ion-item>

The issue I am having that all the instances are showing same date and time even I am returning the different date time with functionToGetTimeForThisTask function for each instance and the other issue is that how can I handle cancel and confirm buttons for each instance. The cancel and confirm buttons does not work in the above code.