Можно ли получить ссылочный элемент, т.е. this.$ref внутри функции dateClick в fullCalendar?

Я использую vuejs для этого проекта. В FullCalendar (v5.3.0) я пытался получить timeGridDay, когда конкретная дата щелкается в представлении месяца (представление по умолчанию), при этом выбранная дата является отображаемым днем.

Я использовал ref для ссылки на компонент FullCalendar. (Здесь показаны только соответствующие части)

<template>
  <div class="main">
    <div class="calendar-holder col-10 section">
      <FullCalendar ref="fullcalendar" :options="options" />
    </div>
  </div>
</template>

И затем я попытался использовать метод dateClick, чтобы перейти к представлению timeGridDay при нажатии даты.

data(){
  return {
    calendarApi: null,
    options: {
      plugins: [ 
        dayGridPlugin,
        timeGridPlugin,
        interactionPlugin,
        listPlugin 
      ],
      initialView: 'dayGridMonth',
      dateClick: function(info) {
        if(confirm('View Schedule?')){
          let calendarApi = this.$ref.fullcalendar.getApi();
          calendarApi.fullCalendar('changeView', 'timeGridDay', info.date);
        }
      }
    }
  }
}

что не сработало. Когда я проверил консоль, она сказала

TypeError: this.$ref не определен

но это не было неопределенным, когда я попробовал тот же код внутри установленного хука (инициализация календаряApi в данных)

mounted(){
  this.calendarApi = this.$refs.fullcalendar.getApi();
  console.log(this.calendarApi)
}

который вернул объект. Но я не смог получить этот объект calendarApi внутри метода dateClick. Я старался:

dateClick: function(info) {
  if(confirm('View Schedule?')){
    this.calendarApi.fullCalendar('changeView', 'timeGridDay', info.date);
  }
}

не работал. консоль выдала эту ошибку:

TypeError: this.calendarApi не определен

Есть ли способ обойти эту проблему? Я попытался получить объект calendarApi и другим методом, но консоль сообщила, что метод не определен. Заранее спасибо.