I am new to vue.js and I try to update data. I wrote this html for icon in order to update data:

<i class="mdi mdi-pencil"
            @click.prevent="$bvModal.show(`Rel${object.id}`)"></i>

This is the code of b-modal:

<b-modal :id="`Rel${object.id}`" ref="editModal" title="Update data">
              <form class="needs-validation" @submit.prevent="handleEdit(object)">
                <div class="row">
                  <div class="col-md-5">
                    <label class="mt-3">From*</label>
                    <b-form-input
                        id="example-input"
                        v-model="object.start_date"
                        type="date"
                        placeholder="DD-MM-YYYY"
                        format="DD-MM-YYYY"
                        autocomplete="off"
                      ></b-form-input>
                  </div>
                  <div class="col-md-5">
                    <label class="mt-3">To*</label>
                    <b-form-input
                        id="example-input"
                        v-model="object.end_date"
                        type="date"
                        placeholder="DD-MM-YYYY"
                        format="DD-MM-YYYY"
                        autocomplete="off"
                      ></b-form-input>
                  </div>
                  <div class="col-md-8">
                    <label class="mt-3">Days</label>
                    <multiselect
                      required
                      v-model="object.weekdays"
                      :options="weekdayOptions"
                      track-by="id"
                      label="weekday"
                      multiple
                      placeholder="Choose days"
                      selectLabel="Day choose"
                      selectedLabel="Chose"
                    >
                    </multiselect>
                  </div>
                  <div class="col-md-5">
                    <label class="mt-3">Start time</label>
                    <date-picker
                      v-model="object.start_time"
                      format="HH:mm"
                      value-type="format"
                      type="time"
                      placeholder="HH:mm"
                    ></date-picker>
                  </div>
                  <div class="col-md-5">
                    <label class="mt-3">End time</label>
                    <date-picker
                      v-model="object.end_time"
                      format="HH:mm"
                      value-type="format"
                      type="time"
                      placeholder="HH:mm"
                    ></date-picker>
                  </div>
                </div>
              </form>
            </b-modal>

And this is the code of method handleEdit:

handleEdit(row) {
  console.log("I am in handle edit");
  if (this.timesAreValid(row.start_time, row.end_time, row.is_night_shift)) {
    console.log("I am in if");
    const data = { ...row }
    delete data['weekdays']
    data['weekdays'] = row.weekdays.map(e => { return { 'id': e, 'weekday': e - 1 } })
    console.log("Before session");

    session.put(`api/user/schedule/${row.id}/update/`, data).then((resp) => {
      console.log(resp.data)
      this.$toastr.Add({
        name: "UniqueToastName",
        title: `Update`,
        msg:
          "Schedule updated!",
        style: { backgroundColor: "#4fd69c", width: "550px" },
        progressbar: false,
        timeout: 3501,
      });

      console.log(row)


    }).catch(e => {
      this.$toastr.e(`Error : ${JSON.stringify(e)}  `)
    })



  } else {
    this.$toastr.e("End time should be after start time");
  }

},

When I press the icon the b-modal appear with all elements except days. My problem is that when I press the update button the method handleEdit doesn’t called and as a results data are not updated. How can I solve this?