vue. js реализация обработки событий в Fullcalendar не работает, и я не понимаю, почему

Question

Я пытался следить за видео на YouTube, чтобы настроить компонент взаимодействия с событиями, и набрал его точно. Я использую VSCode, и он продолжает давать мне typeError, когда я добавляю символ $ в this.store.commit под handleSelect. Это не добавит событие вообще, но если я сначала поставлю символ $, а затем удаляю после щелчка по календарю, это добавляет событие (я) в календарь, и это приводит в бешенство. Если вы можете помочь мне, я был бы очень признателен. Я уже попробовал поискать его в Google для аналогичного сценария ios и ничего не нашел, я проверил раздел комментариев на видео, и там тоже не было ничего полезного, и я даже зашел на сайт fullcalendar, и ничего не помогло. Теперь я не исключаю, что я мог что-то упустить из виду, так что если вы можете указать мне что-то полезное, то это тоже будет полезно.

Повестка дня. vue

<template>
    <div>
        <Fullcalendar 
            :plugins="calendarPlugins" 
            :header="{
                left: 'prev today next', 
                center: 'title', 
                right: 'dayGridMonth, timeGridWeek, timeGridDay, listWeek'
            }"

            :buttonText="{
                today: 'Today',
                month: 'Month',
                week: 'Week',
                day : 'Day',
                list: 'List'
            }"

            :weekends="true"
            :selectable="true"
            :events="EVENTS"
            @select="handleSelect"
        />

        <!-- <modals-container/> -->
    </div>
</template>

<script>
require('@fullcalendar/core/main.min.css')
require('@fullcalendar/daygrid/main.min.css')
require('@fullcalendar/timegrid/main.min.css')
require('@fullcalendar/list/main.min.css')

import Fullcalendar from '@fullcalendar/vue'
import DayGridPlugin from '@fullcalendar/daygrid'
import TimeGridPlugin from '@fullcalendar/timegrid'
import InteractionPlugin from '@fullcalendar/interaction'
import ListPlugin from '@fullcalendar/list'

import { mapGetters } from "vuex"

export default {
    data: () => ({
        calendarPlugins: [
            DayGridPlugin,
            TimeGridPlugin,
            InteractionPlugin,
            ListPlugin
        ]
    }),
    components: {Fullcalendar},
    computed: {
        ...mapGetters(["EVENTS"])
    },
     methods: {
         handleSelect(arg){
             console.log(arg)
             this.$store.commit("ADD_EVENT", {
                id: (new Date()).getTime(),
                title: 'Event',
                start: arg.start,
                end: arg.end,
                allDay: arg.allDay
            })
        }
    }
}
</script>

store. js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        events: []
    },
    getters: {
        EVENTS: state => state.events
    },
    mutations: {
        ADD_EVENT: (state, event) => {
            state.events.push(event)
        }
    },
    actions: {}
})

export default store;

**main.js**

import Vue из 'vue' import app from './App.vue 'импортировать из магазина' ./store/store'

Vue .config.productionTip = false;

new Vue ({render: h => h (App) , store}). $ mount ('# app');

Приложение. vue

<template>
  <div id="app">
    <Agenda/>
  </div>
</template>

<script>
import Agenda from './components/Agenda.vue'

export default {
  name: 'App',
  components: {
    Agenda
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

STACKTRACE:

[Vue warn]: Error in beforeUpdate hook: "TypeError: Cannot read property 'calendar' of undefined"

found in

---> <Fullcalendar>
       <Agenda> at src/components/Agenda.vue
         <App> at src/App.vue
           <Root>
warn @ vue.runtime.esm.js?2b0e:619

vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'calendar' of undefined
    at DayGridSlicer.Slicer._sliceDateSpan (main.esm.js?1b0d:8519)
    at DayGridSlicer.eval [as sliceDateSelection] (main.esm.js?1b0d:1552)
    at DayGridSlicer.Slicer.sliceProps (main.esm.js?1b0d:8446)
    at SimpleDayGrid.render (main.esm.js?379b:1542)
    at SimpleDayGrid.Component.receiveProps (main.esm.js?1b0d:3951)
    at DayGridView.render (main.esm.js?379b:1597)
    at DayGridView.Component.receiveProps (main.esm.js?1b0d:3951)
    at CalendarComponent.renderView (main.esm.js?1b0d:6298)
    at CalendarComponent.render (main.esm.js?1b0d:6162)
    at CalendarComponent.Component.receiveProps (main.esm.js?1b0d:3951)

Uncaught TypeError: Cannot read property 'calendar' of undefined
    at DayGrid.updateSize (main.esm.js?379b:914)
    at DayGridView.AbstractDayGridView.updateSize (main.esm.js?379b:1429)
    at CalendarComponent.updateSize (main.esm.js?1b0d:6311)
    at Calendar.updateSize (main.esm.js?1b0d:7157)
    at Calendar.windowResize (main.esm.js?1b0d:7150)
    at later (main.esm.js?1b0d:1016)