Change attached calendar on VueJS

[vbevdev]

Hi.

Thank you for your awecome calendar!

I got some problem. I think it relates to Vue but I'm not sure.

I have a list with items. Every item has a button which opens calendar. Every calendar has its own disabled dates. Calendar exists in one instance.

My template looks like this:

<div class="modal" :class="{'is-active': calendarOpened}">
            <div class="modal-background"></div>
            <div class="modal-content">
                <input type="date" ref="calendarTrigger">
            </div>
            <button class="modal-close is-large" aria-label="close" @click="closeCalendar"></button>
</div>

Calendar opens by this method:

openCalendar(item) {
                    let disabledDates = item.busy.map(date => {
                        let [day, month, year] = date.split('.');

                        return new Date(year, month - 1, day);
                    });

                    this.calendar = bulmaCalendar.attach(this.$refs.calendarTrigger, {
                        type: 'date',
                        displayMode: 'inline',
                        showHeader: false,
                        showFooter: false,
                        closeOnSelect: false,
                        disabledDates: disabledDates,
                        weekStart: 1
                    })[0];

                    this.calendarOpened = true;
                }

The problem is once calendar is attached disable dates doesn't changes. I can see that this.calendar is new but html doesn't changes. I tried to use destroy() method but it doesn't work as I expected.

Is there a proper way to destroy created calendar? Is there a way to update disabledDates in options? Or maybe there another solution?

Thank in advance!