Update image path vuejs

I'm trying to update an image variable through VueJs and Laravel, unfortunately I'm not able to do so.

Here is the outcome issue:

Request URL: http://dashboard.test/api/services/1
Request Method: PUT
Status Code: 422 Unprocessable Entity
Remote Address: 127.0.0.1:80
Referrer Policy: no-referrer-when-downgrade

It seems everything is uploaded properly except the image variable it is not reading it, as what can be seen here on the raw data:

{image: {}, name: "1232",…}
description: "Provide a complete analysis of the project by a suitable methodology for the project."
image: {}
name: "1232"

Snapshot of the template handling the upload form

<form @submit.prevent="onSubmit" enctype="multipart/form-data" v-else>
   <div class="form-group">
     <label for="input-1">Image</label>
     <img :src="'/images/services/'+service.image">
     <input type="file" name="image" class="form-control" 
      accept="image" v-on:change="onImageChange">
   </div>
   <div class="form-group">
      <label for="input-2">Name</label>
      <input type="text" name="name" class="form-control" id="input-2" 
         placeholder="Enter Skill Name" v-model="service.name">
    </div>
    <div class="form-group">
     <label for="input-3">Description</label>
     <textarea name="description" class="form-control" id="input-3" placeholder="Enter Skill Description" v-model="service.description"></textarea>
</div>
 <div class="form-group">
  <button type="submit" class="btn btn-primary px-5"><i class="icon-lock"></i> Register</button>
   </div>
</form>

The VueJs script responsible for the above form:

export default {
  data() {
    return {
      message: null,
      loaded: false,
      saving: false,
      service: {
        id: null,
        name: "",
        image: "",
        description: ""
      }
    };
  },
  methods: {
    onImageChange(e){
        console.log(e.target.files[0]);
        this.image = e.target.files[0];
        },
    onSubmit(e) {
        e.preventDefault();
        let currentObj = this;
        const config = {
        headers: { 'content-type': 'multipart/form-data' }
        }
        let formData = new FormData();
        formData.append('image', this.image);
        this.saving = true;
        api.update(this.service.id,
            {
            image: this.service.image,
            name: this.service.name,
            description: this.service.description,
        },
        ).then((response) => {
            this.message = 'service updated';
            setTimeout(() => this.message = null, 500);
            this.service = response.data.data;
        }).catch(error => {
            console.log(error)
        }).then(_ => this.saving = false);
    }

ServicesController file, which is responsible for doing the backend:

public function update(Service $service, Request $request)
{
    $data = $request->validate([
        'image' => 'required',
        'name' => 'required',
        'description' => 'required',
    ]);
    if ($request->file('image')->isValid()) {
            $file = $request->file('image') ;
            $fileName = $file->getClientOriginalName() ;
            $destinationPath = 'storage/images/services/' ;
            $file->move($destinationPath,$fileName);
            $service->image = $fileName;
        }
        $service->save();

    $service->update($data);
}

What I believe the problem is that when I open the inspect element and change the image it changes the image variable from <img data-v-41680f60="" src="/images/services/analysis.png"> to <img data-v-41680f60="" src="/images/services/[object File]">

I have no idea where the [object File] came from, and why is it not properly working given that when I try to create a new service it works perfectly fine. It just gets unstable on the update part.