Fullcalendar cannot read property destroy of undefined when going directly to the page

I am using Nuxt 2.14.3 and I want to use the fullcalendar library. For this I have added the following packages via Yarn:

yarn add @fullcalendar/vue
yarn add @fullcalendar/interaction
yarn add @fullcalendar/daygrid
yarn add @fullcalendar/timegrid
yarn add @fullcalendar/list

My Vue template file looks like this:

<template>
  <client-only placeholder="loading...">
    <FullCalendar class="demo-app-calendar" :options="calendarOptions">
      <template #eventContent="arg">
        <b>{{ arg.timeText }}</b>
        <i>{{ arg.event.title }}</i>
      </template>
    </FullCalendar>
  </client-only>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'

export default {
  components: {
    FullCalendar,
  },
  mixins: [
    page({
      meta() {
        return {
          title: this.$tU('meta_title_vrm_planning'),
        }
      },
    }),
  ],
  data() {
    return {
      calendarOptions: {
        plugins: [
          dayGridPlugin,
          timeGridPlugin,
          interactionPlugin, // needed for dateClick
        ],
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay',
        },
        initialView: 'dayGridMonth',
        initialEvents: [
          {
            id: 1,
            title: 'All-day event',
            start: new Date().toISOString().replace(/T.*$/, ''),
          },
          {
            id: 2,
            title: 'Timed event',
            start: `${new Date().toISOString().replace(/T.*$/, '')}T12:00:00`,
          },
        ], // alternatively, use the `events` setting to fetch from a feed
        editable: true,
        selectable: true,
        selectMirror: true,
        dayMaxEvents: true,
        weekends: true,
        select: this.handleDateSelect,
        eventClick: this.handleEventClick,
        eventsSet: this.handleEvents,
        /* you can update a remote database when these fire:
                    eventAdd:
                    eventChange:
                    eventRemove:
                    */
      },
      currentEvents: [],
    }
  },
  methods: {
    handleDateSelect(selectInfo) {
      const title = prompt('Please enter a new title for your event')
      const calendarApi = selectInfo.view.calendar

      calendarApi.unselect() // clear date selection

      if (title) {
        calendarApi.addEvent({
          id: 3,
          title,
          start: selectInfo.startStr,
          end: selectInfo.endStr,
          allDay: selectInfo.allDay,
        })
      }
    },

    handleEventClick(clickInfo) {
      if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
        clickInfo.event.remove()
      }
    },

    handleEvents(events) {
      this.currentEvents = events
    },
  },
}
</script>

It gives me the following errors:

[Vue warn]: Error in mounted hook: "TypeError: DateProfileGeneratorClass is not a constructor"

found in

---> <FullCalendar>

and

TypeError: DateProfileGeneratorClass is not a constructor
    at buildDateProfileGenerator (main.js?d610:7232)

and also

TypeError: Cannot read property 'destroy' of undefined
    at VueComponent.beforeDestroy (FullCalendar.js?ff68:33)

Note: this works perfectly when accessing my page from another page, but when going directly to the page URL (or when clicking CTRL+F5) I receive the errors as mentioned above.

Note 2: I tried transpiling the library in Nuxt config as suggested in the example repo https://github.com/fullcalendar/fullcalendar-example-projects/tree/master/nuxt, but it gives me the exact same errors, but with the .ts files instead of the .js files.