I have used vue-functional-calendar Vue Functional Calendar in my VueJS app in the following way.

<FunctionalCalendar
      v-model="calendarData"
      v-on:dayClicked="date_selected"
      v-on:changedMonth="fetch_disabled_dates_by_month"
      :is-date-range="true"
      :is-date-picker="true"
      :configs="calendarConfigs">
 </FunctionalCalendar>

And the calendarData and configs are as follows:

export default {
    name: "ReservationForm",
    components: {
        FunctionalCalendar,
    },
    data() {
        return {
             calendarData: {},
                 calendarConfigs: {
                      sundayStart: false,
                      dateFormat: "dd/mm/yyyy",
                      isDatePicker: true,
                      isDateRange: true,
                      disabledDates: [] //it will be updated dynamically from API response
                 },
                 current_month: 1 //dynamic
            };
        },
 .......................

Now I'm trying to update the value of disabledDates based on back end API request response. this.calendarConfigs.disabledDates = response.data.disabledDates; here response is coming from server. Though the response.data.disbledDates properly formatted array but here but the value is not updating on the calendar!

For example in the mounted method I tried to fetch disabled dates through API, though API is returning correct data but it's not updating on the calendar.

    axios.defaults.headers.common['Content-Type'] = 'application/json';
        axios.post("/api/get-disabled-dates", {
            month: this.current_month,
        })
        .then((response) => {
            if(response.data.result == 'success'){
                this.calendarConfigs.disabledDates = response.data.disabledDates;
//the above line should update the disabled dates at calendar but it's not. Even if I hard code the value here it's not working
            }
        });