DatePicker displays as one long column half the time?

[luluconcha]

Working on a project when I am using the DatePicker in "dateTime"/range mode and for some reason, half the time it shows up as one long column without styling and half the time it works just fine. My partner, on a different computer, has the same. Any thoughts? Code looks like this:

<script setup>
import { ref, computed } from 'vue'
import { DatePicker } from 'v-calendar'
import CardBox from '@/components/reusables/CardBox.vue'

const emit = defineEmits(['validar'])
const range = ref({start: new Date(), end: new Date()})

const rules = ref({
    minutes: { interval: 15 },

})

const dragValue = ref(null);
const selectDragAttribute = computed(() => ({
  popover: {
    visibility: 'hover',
    isInteractive: false,
  },
}));

</script>

<template>
        <CardBox>
            <div @focusout="emit('validar', range)">

                <DatePicker 
                v-model.range="range"
                mode="dateTime"
                is24hr
                :rules="rules"
                locale="ca"
                :select-attribute="selectDragAttribute"
                :drag-attribute="selectDragAttribute"
                @drag="dragValue = $event"
                >
                <template #day-popover="{ format }">
                    <div class="text-sm">
                    {{ format(dragValue ? dragValue.start : range.start, 'DD/MM') }}
                    {{ format(dragValue ? dragValue.end : range.end, 'DD/MM') }}
                </div>
                </template>
            </DatePicker>

            </div>

        </CardBox>
</template>

Bug looks like this :

[basarozcan]

You should import css file to see proper calendar: import 'v-calendar/style.css';