Vue fullcalendar dynamic events not showing

I have used the fullcalendar plugin on my nuxt 3 projects and I need to set events on the calendar but my events are coming from API so I have taken on const upcomingEventData = ref([]) const and after API response I am updating the variable with events return by API but it is not reflecting on the calendar.

<FullCalendar :options="calendarOptions">
   <template v-slot:eventContent="arg">
      <el-tag :type="arg.event.extendedProps.type" size="large">
       {{arg.event.title}}
      </el-tag>
   </template>
</FullCalendar>

const upcomingEventData = ref([]);

const calendarOptions = {
  ...FullCalendar.options,
  initialView: "dayGridMonth",
  dateClick: handleDateClick(),
  dayHeaderContent: function (arg) {
    return arg.text.toUpperCase();
  },
  },
  events: upcomingEventData.value,
  eventColor: "#FFFFFF",
  eventChange: function (arg) {
    console.log('Data--> ' , arg);
  },
  headerToolbar: {
    start: "today prev,next", 
    center: "title",
    end: "dayGridMonth,dayGridWeek,dayGridDay",
  },
  buttonText: {
    today: "Today",
    month: "Month",
    week: "Week",
    day: "Day",
    list: "List",
  },
  buttonIcons: {
    prev: "chevron-left",
    next: "chevron-right",
    prevYear: "chevrons-left", // double chevron
    nextYear: "chevrons-right", // double chevron
  },
};

const getEventData = async () => {
  const { data, error } = await useGetQuery("event/get");
  if (error.value) {
    useErrorHandling(error.value);
  }
  if (data.value) {
    let response = data.value.data;
    upcomingEventData.value = [];
    response.data.forEach((element, index) => {
      upcomingEventData.value[index] = {
        title: element.eventTitle,
        date: formatDate(new Date(element.eventDate), "YYYY-MM-DD"),
        type: "success",
      }
    });
  }
};

onMounted(() => {
  getEventData();
});

I think I need to refresh the calendar again once upcomingEventData constant is update. Kindly please help me and ask if any more details is required.

Thanks in advance

I have fixed this issue using vue computed property. I have just wrapped the calendarOptions constant with the computed const calendarOptions = computed(() => { ... }.

const calendarOptions = computed(() => {
  return {
    ...FullCalendar.options,
    initialView: "dayGridMonth",
    dateClick: handleDateClick(),
    },
    events: upcomingEventData.value,
    eventColor: "#FFFFFF",
    eventChange: function (arg) {},
    headerToolbar: {
      start: "today prev,next",
      center: "title",
      end: "dayGridMonth,dayGridWeek,dayGridDay",
    },
    buttonText: {
      today: "Today",
      month: "Month",
      week: "Week",
      day: "Day",
      list: "List",
    },
    buttonIcons: {
      prev: "chevron-left",
      next: "chevron-right",
      prevYear: "chevrons-left", // double chevron
      nextYear: "chevrons-right", // double chevron
    },
  };
});