我编写了一个Vue.js组件，用于显示具有不同背景颜色的自定义日历。在选择任何一天之后，我的所有更改都将丢失，因为Flatpickr会重新绘制days DOM元素。如何在更新日期网格时重复onDayCreate回调的操作？

<script>
import { UI_DATE_FORMAT } from "../data/System";
import flatPickr from "vue-flatpickr-component";
import RequestService from "../services/RequestService";

const request = new RequestService();

export default {
    props: [],

    data() {
        return {
            selectedDate: '',
            currentMonth: null,
            busyDaysData: {},
            updateDataProcess: false,

            dateConfig: {
                inline: true,
                dateFormat: UI_DATE_FORMAT,
                monthSelectorType: 'static',
                wrap: false,

                onDayCreate: function(dObj, dStr, fp, dayElem) {
                    this.calendarDayCreate(dayElem, fp);
                }.bind(this),
            },
        }
    },

    components: {
        flatPickr,
    },

    mounted() {},

    methods: {

        calendarDayCreate(dayElem, fp) {
            const month = fp.currentMonth + 1;
            const dayDay = dayElem.dateObj.getDate();
            const dayMonth = dayElem.dateObj.getMonth() + 1;

            if (dayMonth !== month) return;

            if (this.updateDataProcess) {
                const timer = setTimeout(() => {
                    if (!this.updateDataProcess) {
                        clearTimeout(timer);
                        this.handleDay(dayDay, dayElem);
                    }
                }, 250);
            } else {
                if (this.currentMonth !== month) {
                    this.updateDataProcess = true;

                    new Promise((onSuccess, onError) => {
                        request.requestData({
                            data: 'Calendar\\BusyDaysForMonth',
                            arguments: {
                                appointment_id: 0,
                                month,
                                extended: true,
                            },
                        },
                        (response) => { onSuccess(response) },
                        (error) => { onError(error) });
                    }).then(
                        (response) => {
                            this.updateDataProcess = false;

                            this.currentMonth = month;
                            this.busyDaysData = response.data;
                            this.handleDay(dayDay, dayElem);
                        },
                        (error) => {
                            this.updateDataProcess = false;
                            console.log(error);
                        }
                    );
                }
            }
        },

        handleDay(day, dayElem) {
            if (!this.busyDaysData[day]) return;
            console.log(dayElem);
            dayElem.classList.add('app-' + this.busyDaysData[day].appointment_status ?? '');
        }
    }
};
</script>

<template>
    <b-row id="appointments-calendar">

        <b-col cols="12">

            <flat-pickr :config="dateConfig" v-model="selectedDate"
                class="form-control flatpickr active"
                :placeholder="$t('appointments_input_date_ph')">
            </flat-pickr>

        </b-col>

    </b-row>
</template>

<style scoped lang="scss">


</style>

Before select
After day select
我尝试了文档中不同的事件钩子（Events & Hooks），但是它们不能给予相同的设置days元素的可能性，比如 onDayCreate 函数。