(VUE3) Fullcalendar change month/year NOT working - fullcalendar

Question

I'm designing a log display screen using vue3 and fullcalendar and logs(events) are dynamically loaded into the calendar. 400+ events are rendering successfully in the calendar but this time the month/year toggle buttons are not working and console doesn't show any errors.
here is my calendarOptions and some functions;
calendarOptions: {
plugins: [dayGridPlugin, interactionPlugin],
initialView: "dayGridMonth",
headerToolbar: {
start: "",
center: "title",
end: "today,prev,next,prevYear,nextYear",
},
eventDidMount: function (info) {
var tooltip = new tippy(info.el, {
content: info.event.extendedProps.description,
});
},
events: [],
eventClick: function (info, event, element) {
if (info.event.extendedProps.description == "Download") {
console.log(
"Downloading event:",
info.event.extendedProps.fileName
);
Notify.create({
color: "info",
position: "bottom-left",
message: "Downloading File: " + info.event.extendedProps.fileName,
icon: "folder_open",
});
const url =
"http://10.10.22.14:3333" + info.event.extendedProps.logUrl;
axios({
url,
method: "GET",
responseType: "blob", // important
})
.then((response) => {
const url = window.URL.createObjectURL(
new Blob([response.data])
);
const link = document.createElement("a");
link.href = url;
link.setAttribute(
"download",
`${info.event.extendedProps.fileName}`
);
document.body.appendChild(link);
link.click();
})
.catch((error) => {
console.error(error.message);
Notify.create({
color: "negative",
position: "bottom-right",
message: error.message,
icon: "report_problem",
});
});
}
if (info.event.extendedProps.description == "Check") {
console.log("Checking event:", info.event.extendedProps.fileName);
Notify.create({
color: "info",
position: "bottom-left",
message: "Checking Logs: " + info.event.extendedProps.fileName,
icon: "safety_check",
});
}
if (info.event.extendedProps.description == "Share") {
console.log("Sharing event:", info.event.extendedProps.fileName);
Notify.create({
color: "info",
position: "bottom-left",
message: "Sharing Logs: " + info.event.extendedProps.fileName,
icon: "share",
});
}
},
}
method of calling dynamic log (events);
getData(Seckey) {
let eventGuid = 0;
this.data = [];
this.log1 = [];
this.log2 = [];
this.events = [];
this.logs = [];
axios
.get(
"http://10.10.22.14:3333/getkamusinglogs?secretkey=" +
Seckey +
"&filter=zip"
)
.then((response) => {
let logs = [];
const data = response.data;
// for (let key in data) {
let yearChildren = data[1]["children"];
for (let year in yearChildren) {
let monthChildren = yearChildren[year]["children"];
for (let month in monthChildren) {
logs = logs.concat(monthChildren[month]["children"]);
// logs = logs.slice(10);
}
}
// }
logs.forEach((item) => {
item.start = item.birthtime.substring(0, 10);
item.url = item.path;
item.size =
item.size > 1048576
? (item.size / 1048576).toFixed(2) + " MB"
: (item.size / 1024).toFixed(2) + " KB";
// console.log(`${item.size}`);
delete item.birthtime;
delete item.path;
this.events.push(
{
id: createEventId(),
title: "A Download",
description: "Download",
logUrl: `${item.url}`,
start: `${item.start}`,
// url: `http://10.10.22.14:3333/${item.url}`,
eventDisplay: "block",
className: " download-btn",
extendedProps: {
size: `${item.size}`,
fileName: `${item.name}`,
logUrl: `${item.url}`,
},
},
{
id: createEventId(),
title: "B Check",
description: "Check",
start: `${item.start}`,
// url: `http://10.10.22.14:3333/${item.url}`,
eventDisplay: "block",
className: "save-btn",
extendedProps: {
size: `${item.size}`,
fileName: `${item.name}`,
logUrl: `${item.url}`,
},
},
{
id: createEventId(),
title: "C Share",
description: "Share",
start: `${item.start}`,
// url: `http://10.10.22.14:3333/${item.url}`,
eventDisplay: "block",
className: "share-btn",
extendedProps: {
size: `${item.size}`,
fileName: `${item.name}`,
logUrl: `${item.url}`,
},
}
);
});
console.log("ALL_LOGS \n", logs);
})
.then(() => {
this.calendarOptions.events = this.events;
console.log("ALL_EVENTS \n", this.events);
})
.catch((error) => {
console.error(error);
Notify.create({
color: "warning",
position: "bottom-right",
message: error.message,
icon: "report_problem",
});
});
function createEventId() {
return String(eventGuid++);
}
},
Since the log records are live via a private api, it is not possible for me to create a live test code snipped, but uploading 400+ log records to the calendar is successful, but the month/year change buttons do not work. if i ridiculously want to view the first 100 of records it renders successfully and no problem