Vuetify v-date-picker throws an error when using Month first - vuejs2

Question

I'm creating a tool where the user can change the groupings of data shown on a graph - showing it by day, week or month - by setting a range of dates using a v-date-picker.
When viewing by month, the date picker should default to a month selection, otherwise date.
The issue - If you open the v-date-picker in the month format before you have opened the date format, an error will show up in the console (RangeError: Invalid time value) once you go back to the day/week view. This does not happen if you open the day or week component first.
I've created a small snippet that replicates the issue on code pen, link below.
<div id="app">
<v-app id="inspire">
<v-row>
<v-menu ref="menu" :close-on-content-click="false" transition="scale-transition" offset-y min-width="auto">
<template #activator="{ on, attrs }">
<v-text-field v-model="dateRange" label="Date Range" prepend-icon="mdi-calendar" readonly v-bind="attrs" v-on="on" />
</template>
<v-date-picker v-model="dateRange" :show-current="false" :type="volumeType" no-title scrollable range />
</v-menu>
</v-row>
<v-row>
<v-btn #click="changeVolumeType('date')">
Date
</v-btn>
<v-btn #click="changeVolumeType('month')">
Month
</v-btn>
</v-row>
</v-app>
</div>
And the JS
new Vue({
el: "#app",
vuetify: new Vuetify(),
data() {
return {
dateRange: ["2022-10-10", "2022-10-23"],
volumeType: "date"
};
},
methods: {
changeVolumeType(newType) {
this.volumeType = newType;
}
}
});
https://codepen.io/FN_Antonie/pen/yLjrZoo - Codepen where you can replicate the issue - though you will need to open the console to see it. Try clicking on the month button first, opening the date picker, then clicking on the Date button. The console error should appear. Otherwise any other order it seems to be fine.
I've tried tracking 2 different variables and 2 different v-date-picker components, the issue still persists. I think the month picker is setting a default value that the date picker can not read, though I've tried setting explicit dates in various places but to no avail.
Any help would be greatly appreciated.

Answer 1

I'm guessing v-date-picker most likely wasn't meant to have a dynamic type and is breaking in this one particular case. You can get around it by adding a :key="volumeType" prop to fully rerender the date-picker when changing the type. This will also have the side effect of always resetting the dateRange values to their default value, but you can always add code to your changeVolumeType method to correctly format dateRange manually based on date or month.
<v-date-picker
v-model="dateRange"
:show-current="false"
:type="volumeType"
:key="volumeType"
no-title
scrollable
range
/>