Vue3 datepicker: How to display the default calendar given for a specific month and year?

I am using @vuepic/vue3datepicker which automatically displays the current month's days when I use it:

<template>
  <VueDatePicker v-model="date" inline></VueDatePicker>
</template>

But I am getting the month and year from an API, so I would like to display to the user the days of the related month and year, not the days of the current month.

Actually this goal is easy to achieve by:

onMounted(() => {
  date.value = new Date(props.year, Number(props.month)-1, 1)
})

The problem is that I also need to use the highlight prop (because I also get a list of other days of month/year couple which I need to highlight to the user), which thing means my date in v-model="date" should be an array:

<template>
  <VueDatePicker v-model="date" :highlight="highlightedDates" />
</template>

So I am not sure how to overcome this.

Any suggestions on how to achieve this ?

It's no problem to put the new Date() value into an array of other new Date() values. Here is an example of an array containing 1 date:

date.value = [ new Date(props.year, Number(props.month)-1, 1) ]

You can manually push, slice, or do any other native Array functions as needed. For the v-model in the template to work you may also need multi-dates prop as well.

  <VueDatePicker v-model="date" inline multi-dates></VueDatePicker>