Запустите JavaScript на vue.js

Я пытаюсь использовать опцию календаря flatpickr в проекте vue. По сути, на основе параметра радио я визуализирую различный html-контент с условным рендерингом "v-if".

HTMl для выбора таймера выглядит так:

<div>
    <label>
       <input type = "radio" name = "timerType"
              @click = "initCalendar"
              checked = ""
              v-model = "timer_type" 
              value = "timer1"> TIMER 1 
     </label>
</div>
<div>
     <label class = "form-check-label">
        <input type = "radio"  name = "timerType"
              v-model = "timer_type"
              value = "timer2">TIMER 2
     </label>
</div>

и HTML, в котором я отображаю таймер, такой же, я также применяю класс и идентификатор для календаря flatpickr:

<div v-if = "timer_type === 'timer1'">
    <input class = "flatpickr flatpickr-input active" type = "text" 
           placeholder = "Select Date.."
           v-model = "end_date"
           id = "datetime" readonly = "readonly">
</div>
<div v-else>
   <!--Other stuff-->
</div>

Теперь для правильной работы flatpickr нужен следующий код для инициализации.

flatpickr("#datetime", {
     minDate: "today",
     enableTime: true,
     dateFormat: "F j, Y H:i",
});

Внутри Vue у меня возникла проблема с запуском объекта flatpickr. Я добавил функцию initCalendar, когда пользователь нажимает на первое радио. Функция просто выполняет функцию, показанную выше. Это работает в первый раз, но у меня есть проблема, когда пользователь нажимает на таймер2 и снова на таймер1. Проблема, с которой я сталкиваюсь, заключается в том, что мне нужно щелкнуть 2 раза, прежде чем функция начнет применять календарь. Первое время вообще не работает. Может быть, метод @click неверен? Какое-то предложение?

Заранее спасибо!