哪位老哥熟悉vue fullcalendar的，能帮忙看看为啥addEvent没效果吗

Question

<template>
  <FullCalendar
    ref="fullCalendar"
    scheduler-license-key="GPL-My-Project-Is-Open-Source"
    :plugins="calendarPlugins"
    default-view="resourceTimelineDay"
    :header="{
      left: 'today prev,next',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimelineWeek'
    }"
    :button-text="buttonText"
    :resource-columns="resourceColumns"
    :resources="resources"
    :selectable="selectable"
    :slot-event-overlap="slotEventOverlap"
    :overlap="selectOverlap"
    :select-mirror="selectMirror"
    :events="calendarEvents"
    :event-color="'black'"
    :event-background-color="'#378006'"
    @select="selectEvent"
  />
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import resourceTimelinePlugin from '@fullcalendar/resource-timeline'
import interractionPlugin from '@fullcalendar/interaction'
import timePlugin from '@fullcalendar/timeline'

export default {
  components: {
    FullCalendar
  },
  data() {
    return {
      calendarPlugins: [resourceTimelinePlugin, interractionPlugin, timePlugin],
      editable: true,
      slotEventOverlap: false,
      buttonText: {
        today: '今天',
        month: '月',
        week: '周',
        day: '天'
      },
      selectMirror: true,
      calendarEvents: [
        // initial event data
        { title: 'Event Now', start: new Date(), end: new Date() }
      ],
      calendarApi: null,
      selectable: true,
      selectOverlap: false,
      aspectRatio: 1.35,
      resourceColumns: [
        {
          group: true,
          labelText: '楼号',
          field: 'building'
        },
        {
          labelText: '会议室名称',
          field: 'title'
        },
        {
          labelText: '容量',
          field: 'occupancy'
        },
        {
          labelText: '媒体播放',
          field: 'media'
        }
      ],
      resources: [
        { id: 'a', building: '勤园1号楼', title: '勤1会议室 A', occupancy: 40, media: 'yes' },
        { id: 'b', building: '勤园1号楼', title: '勤1会议室 B', occupancy: 100, media: 'yes' },
        { id: 'c', building: '勤园1号楼', title: '勤1会议室 C', occupancy: 20, media: 'yes' },
        { id: 'd', building: '勤园1号楼', title: '勤1会议室 D', occupancy: 50, media: 'no' },
        { id: 'e', building: '勤园1号楼', title: '勤1会议室 E', occupancy: 4, media: 'no' },
        { id: 'f', building: '勤园1号楼', title: '勤1会议室 F', occupancy: 40, media: 'no' },
        { id: 'g', building: '勤园2号楼', title: '勤2会议室 G', occupancy: 400, media: 'yes' },
        { id: 'h', building: '勤园2号楼', title: '勤2会议室 H', occupancy: 40, media: 'yes' },
        { id: 'i', building: '勤园2号楼', title: '勤2会议室 I', occupancy: 40, media: 'yes' },
        { id: 'j', building: '勤园2号楼', title: '勤2会议室 J', occupancy: 40, media: 'yes' },
        { id: 'k', building: '勤园2号楼', title: '勤2会议室 K', occupancy: 40, media: 'no' },
        { id: 'l', building: '勤园2号楼', title: '勤2会议室 L', occupancy: 40, media: 'no' }
      ]
    }
  },
  mounted() {
    this.calendarApi = this.$refs.fullCalendar.getApi()
  },
  methods: {
    // selects(arg) {
    // alert('您已选择从 ' + info.startStr + ' 到 ' + info.endStr + '在' + info.resource.title + '进行会议的预约')
    // var title1 = prompt('请输入会议名称或者预约者的名字')
    // const calendarApi = this.$refs.fullCalendar.getApi()
    // if (title1) {
    //   calendarApi.addEvent({
    //     title: title1,
    //     start: info.start,
    //     end: info.end
    //   })
    // }
    selectEvent(info) {
      var title = prompt('input')
      if (title) {
        console.log(title)
        this.calendarApi.addEvent({
          title: title,
          start: info.start,
          end: info.end
        })
      }
      console.log(info)
      this.calendarApi.render()
    }

  }
}

</script>

<style lang='scss'>

@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/timeline/main.css';
@import '~@fullcalendar/resource-timeline/main.css';

</style>