Recently, I integrated a third-party component called <datetime-picker> into my project. This component requires a Date[] of size 2 as its v-model in order to set a range of time. However, in my existing codebase, I have been using two separate Date objects for the start and end times, named startTime and endTime, respectively. I would prefer to continue using this structure.
// in my previous codebase (class-based Vue component)
private startTime = new Date();
private endTime = new Date();
// However, now I am forced to store the values in an array for the third-party component
private dateTimeRange = [this.startTime, this.endTime];
Unfortunately, simply passing dateTimeRange to the <datetime-picker> won't work as expected, as the array's reference will get overwritten during updates.
<datetime-picker v-model="dateTimeRange" ... />
I am looking for an elegant solution to ensure that any changes made by the datetime picker component are properly reflected back to the startTime and endTime objects.