Как обновить данные в vue.js?

Я новичок в vue.js и пытаюсь обновить данные. Я написал этот код для иконки карандаша

<i class="mdi mdi-pencil"
 v-b-modal.updateHolidayType
 ></i>

Я пишу это для модальных

<b-modal
                  id="updateHolidayType"
                  title="Update holiday"
                  centered
                  hide-footer>
                  <ModalForm
                   cardTitle="Update holiday"
                   description="Update holiday"
                   :holiday="holiday"
                   @holidayUpdated="holidayUpdated"/>
                </b-modal>

и это для формы

EditForm() {
  const holidayTypesId = this.holidayTypes
    .filter((e) => e.title === this.holidayTypeValue)
    .map((item) => item.id);

  session
    .put(`api/person/holiday/${this.holidayId}/update/`, {
      holidays_start_date: this.startDate,
      holidays_end_date: this.endDate,
      comments: this.comments,
      person: this.$route.params.id,
      holiday_type: holidayTypesId,
    })
    .then(() => {
      this.alertShow = !this.alertShow;
      this.alertVariant = 'success';
      this.alertMsg = 'Updated';
      setTimeout(() => {
        this.$emit('holidayUpdated');
      }, 1500);
    })
    .catch((e) => {
      this.alertShow = !this.alertShow;
      this.alertVariant = 'danger';
      this.alertMsg = e.response.data;
    });
}

Но когда я нажимаю на карандаш, я попадаю на пустую страницу. Когда я нажимаю на карандаш, я хочу, чтобы на странице отображался модал, в котором есть данные и я могу их редактировать. Как я могу это сделать?

Вернуться на верх