Update in Laravel VueJs

Pass an Id parameter to this.getProduit() in your mounted(). I don't think you produit in props either. Are you able to get the expected data?

@apex1 I dont use axios but you can use this as a guide. In my edit method I clone the object and set it to the form. The form is where you would create a new item. If the key values are the same for a item being created and one being updated it should work no problem. Say it's a post:{title: '', text: ''} that is how you create it so when you edit it it should be the same parameters post:{title: 'my post', text: 'my text'}.

When saving just do an if else checking for the form.id if it doesn't exist its a new product and if it does exist it's an update.

When using this method you have to pass the item you want to edit, be it the table row item.

import _ from 'lodash';

edit(item) {
    this.form = _.cloneDeep(item);
    this.dialogVisible = true;  //if using dialogBox
},

Hope this helps

If you want to send files with Axios, you should use a FormData object. Here is working example of something I did yesterday using POST method and this.form is an object storing my form fields.

let formData = new FormData();

Object.keys(this.form).forEach((key) => {
    if ("files" !== key) {
        formData.append(key, this.form[key]);
    }
});
for (var i = 0; i < this.form.files.length; i++) {
    formData.append("files[" + i + "]", this.form.files[i]["raw"]);
}

axios
.post(this.route_api, formData, {
    headers: {
        "Content-Type": "multipart/form-data",
    },
})
.then(
    (response) => {
    },
    (error) => {
        console.log(error);
    }
);

You maybe should do some validation in your Controller on the data received like

if (!$request->has('name')) {
    return response()->json(['errors' => [['status' => '400', 'detail' => 'Invalid payload']]], 400);
}

I got the solution of my problem Here is the solution :

<template #cell(edit)="data">
   <center>
       <button class="btn btn-sm btn-outline-info"
        v-on:click="editProduit(data.item.id)"
        data-target="#modalEdit">
        <i class="fas fa-pen"></i>
       </button>
  </center>
 </template>

the script, Get the product on the Modal

editProduit(id) {
      axios
        .get("/api/edit/" + id)
        .then((response) => {
          this.id = response.data.id;
          this.nom = response.data.nom;
          this.description = response.data.description;
          this.prix = response.data.prix;
          this.type = response.data.type;
          this.image = response.data.image;
          this.categories_id = response.data.categories_id;
          this.fournisseurs_id = response.data.fournisseurs_id;
          this.users_id = response.data.users_id;
          this.$refs.myModalRefEdit.show();
        })
        .catch((error) => console.log(error));
    },

The update method product on the Modal

    updateProduit() {
      const data = new FormData();

      data.append("nom", this.nom);
      data.append("description", this.description);
      data.append("prix", this.prix);
      data.append("type", this.type);
      data.append("image", this.image);
      data.append("categories_id", this.categories_id);
      data.append("fournisseurs_id", this.fournisseurs_id);
      data.append("users_id", this.users_id);
      const config = {
        headers: {
          "content-type": "multipart/form-data",
          "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]')
            .content,
        },
      };
      axios
        .post("/api/updateProduit/" + this.id, data, config)
        .then((response) => {
          this.form.reset();
          window.location = response.data.redirect;
        })
        .then(location.reload())
        .catch(function (error) {
          console.log(error);
        });
    },