@update:to-page not working for V-Calender (DatePicker) in Laravel Vue3

Question

I am trying to fetch data from a method using v-calendar (version: ^3.1.2) in my Laravel(10)-Vue(3) application. However, I am unable to do so. I have checked v-calendar documentation which says to-page is replaced by initial-page. I replaced it, but still no luck.

Here is my sample code:

<template>
    <div>
        <div class="row">
            <div class="col-md-4 col-sm-12 mb-5">
                <DatePicker v-model="date" :attributes="attributes" @update:to-page="fetchMonthlyData" expanded></DatePicker>
            </div>
        </div>
    </div>
</template>

<script>
    import {DatePicker}  from 'v-calendar';
    import 'v-calendar/style.css';

    export default{
        components:{ DatePicker },
        data():{
            return{
                date: new Date()
            }
        },
        computed:{
            attributes() {
                console.log("attributes 1")
                // returns something that I will be needing later
            }
        }
        methods:{
            fetchMonthlyData (e) {
                // not getting inside fetchMonthlyData and printing the log message in the console.
                console.log("fetchMonthlyData 1")
            }
        }
    }
</script>

The sample code worked on my application before when it was vue2 and v-calendar version was ^2.3.