vuejs 3 support, ranges not updated on calendar

[lfmunoz]

Was trying to get this to work on vuejs3 but it won't update the dates on the calendar. See the watch section for how I was trying to do that. It updates the dates but the ranges don't change to select the updates ranges.

<template>
    <input ref="refCal" :type="refType" />
</template>

<script>
    import { watch, ref, defineEmits, onMounted} from 'vue';
    import bulmaCalendar from "bulma-calendar/dist/js/bulma-calendar.min";

    export default {
        emits: ['update:modelValue'],
        setup(props, { emit }) {
            const refCal = ref(null);
            const refType = ref(props.type);
            const refDate = ref([null, null]);

            // Set date
            if (props.range) {
                if (props.modelValue instanceof Array) {
                    refDate.value = props.modelValue;
                }
            } else {
                refDate.value[0] = props.modelValue;
            }

            // can only access ref after mounted
            onMounted(() => {
                // Attach Calendar
                const calendar = bulmaCalendar.attach(refCal.value, {
                    ...props.options,
                    displayMode:     props.inline ? 'inline' : (props.dialog ? 'dialog' : 'default'),
                    // isRange:         props.range,
                    isRange:         true,
                    showClearButton: props.clearable,
                    startDate:       refDate.value[0],
                    startTime:       refDate.value[1],
                    endDate:         refDate.value[0],
                    endTime:         refDate.value[1],
                });
                // Event Handler
                calendar[0].on('save', e => {

                    refDate.value = [e.data.startDate, e.data.endDate];

                    if (props.range) {
                        emit('update:modelValue', refDate.value);
                        return;
                    }

                    emit('update:modelValue', refDate.value[0]);

                });
                console.log(calendar);

                // https://github.com/Wikiki/bulma-calendar/blob/master/src/js/index.js
                watch( () => {
                    console.log(props.modelValue)

                    // calendar[0].clear()
                    // calendar[0].setStartDate(props.modelValue[0])
                    // calendar[0].startDate = props.modelValue[0]
                    // calendar[0].endDate = props.modelValue[1]
                    // calendar[0].refresh()
                });
            })


            return {
                refType,
                refCal,
                refDate
            }
        },
        props: {
            clearable: {
                type: Boolean,
                default: false
            },
            dialog: {
                type: Boolean,
                default: false
            },
            inline: {
                type: Boolean,
                default: false
            },
            range: {
                type: Boolean,
                default: false
            },
            options: {
                type: Object,
                default() { return {}; }
            },
            type: {
                type: String,
                default: 'datetime'
            },
            modelValue: Date|Array|null
        },

    }

</script>

[michael-hack]

Sorry, I can't help with VueJS 3 at the moment, as I use the calendar exclusively in conjunction with Buefy, which is still based on VueJS 2.

[Poeschl]

Is this still the case? bulma-calendar is not available for Vue3?