Can't access property on my Edit Button

I would like to retrieve an element from my array to display it in my form and update said elements.

here is my Code :

<script setup>
const form = reactive({
  supply_name: "",
  supply_email: "",
  supply_phone: "",
  supply_address: "",
  supply_city: "",
  supply_zip_code: "",
});
const updateModalActive = ref(false);
const editClick = async (supply) => {
  this.supply_id = supply.supply_id;
  this.supply_name = supply.supply_name;
  this.supply_phone = supply.supply_phone;
  this.supply_email = supply.supply_email;
 this.supply_address = supply.supply_address;
 this.supply_city = supply.supply_city;
 this.supply_zip_code = supply.supply_zip_code;
},

</script>

<template>
  </CardBoxModal>

  <!-- Modal -->
  <CardBoxModal_JTO
    v-model="updateModalActive"
    title="Modifier le fournisseur"
    has-close
  >
    <form @submit.prevent="saveSupply">
      <CardBox>
        <FormField label="Noms & Email">
          <FormControl
            id="supply_name"
            v-model="form.supply_name"
            name="supply_name"
            :icon="mdiAccount"
            placeholder="Nom du fournisseur"
            required
          />
          <FormControl
            id="supply_email"
            v-model="form.supply_email"
            name="supply_email"
            type="email"
            :icon="mdiMail"
            placeholder="Email du fournisseur"
            required
          />
        </FormField>

        <!-- Buttons footer -->
        <BaseButtons class="flex justify-center">
          <BaseButton
            class="mr-2"
            type="submit"
            color="jt_orders"
            label="Modifier"
          />
          <BaseButton
            class="ml-2"
            type="reset"
            color="danger"
            outline
            label="Annuler"
          />
        </BaseButtons>
      </CardBox>
    </form>
  </CardBoxModal_JTO>

  <table>
    <thead>
      <tr>
        <th v-if="checkable" />
        <th>Nom</th>
        <th>Email</th>
        <th />
      </tr>
    </thead>
    <tbody>
      <tr v-for="supply in itemsPaginated" :key="supply.supply_id">
        <TableCheckboxCell
          v-if="checkable"
          @checked="checked($event, supply)"
        />
        <td data-label="Nom">
          {{ supply.supply_name }}
        </td>
        <td data-label="Email">
          {{ supply.supply_email }}
        </td>
        <td class="before:hidden lg:w-1 whitespace-nowrap">
          <BaseButtons type="justify-start lg:justify-end" no-wrap>
            <BaseButton
              color="jt_orders"
              :icon="mdiPencil"
              small
              @click="editClick(supply), (updateModalActive= true)"
            />
            <BaseButton
              color="danger"
              :icon="mdiTrashCan"
              small
              @click="isModalDangerActive = true"
            />
          </BaseButtons>
        </td>
      </tr>
    </tbody>
  </table>
</template>

Somehow i get this error Uncaught (in promise) TypeError: can't access property "supply_id", this is undefined. And So, I can't get the elements on the form, to modify. Thank you for your help.