将元素追加到Fullcalender时Vuejs不起作用

<template>
  <div>
    <div ref="calendar"></div>
    <button @click="appendEvent">追加事件</button>
  </div>
</template>

<script>
import { Calendar } from '@fullcalendar/core';
import interactionPlugin from '@fullcalendar/interaction';

export default {
  mounted() {
    this.initCalendar();
  },
  methods: {
    initCalendar() {
      const calendarEl = this.$refs.calendar;
      const calendar = new Calendar(calendarEl, {
        plugins: [interactionPlugin],
        // 其他配置项...
      });
      calendar.render();
    },
    appendEvent() {
      const calendarEl = this.$refs.calendar;
      // 在这里通过操作 calendarEl 来追加事件
    },
  },
};
</script>