I am new to vue.js and I try to update data. I write this code for pencil icon

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

I write this for modal

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

and this for form

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;
    });
}

But when I click on pencil I go in empty page. When I click on pencil I want the page to show a modal which have the data and I can edit them. How can I do this?