My Element UI Date Picker Range in Vue 3

ElementDatePicker.vue

<template>
  <div>
    <Calendar 
      size="mini" 
      v-model="myDate"
      :type="dataExibitionTime === 'monthly' ? 'monthrange' : dataExibitionTime === 'yearly' ? 'monthrange' : 'daterange'"
      @change="setRangeDate(); someFunction(param)"
    />
  </div>
</template>

<script setup>
import dayjs from 'dayjs'

// Here I work with el-date-picker as component
import Calendar from '@/components/Calendar.vue'

const dataExibitionTime  = ref('daily')
const myDate = ref([calendarRange.value.start, calendarRange.value.end])

// Object with my start and end date (using dayjs to get a full month) and formatting date
const calendarRange = ref({
    start: dayjs().startOf('month').format('YYYY-MM-DD'),
    end: dayjs().endOf('month').format('YYYY-MM-DD'),
})

// Here I set an start and end date to my v-model (myDate)
const setRangeDate = () => {
    calendarRange.value.start = myDate.value[0]
    calendarRange.value.end = myDate.value[1]
}
</script>

<style lang="css" scoped>
</style>