Edit page nuxtjs+vForm

Edit.vue

<template>
  <div class="addserver-wrapper addserver-page-wrapper">
    <form @submit.prevent="editServer">
      <div class="card mb-4">
        <div class="cover-wrapper">
          <div class="cover-img-wrapper">
            <div v-if="!coverImgUrl" class="card-img cover-img" :style="{ 'background-image': 'url(' + form.coverimg + ')' }"></div>
            <div v-else class="card-img cover-img" :style="{ 'background-image': 'url(' + coverImgUrl + ')' }"></div>
            <label class="btn btn-secondary btn-cover-upload">
              <fa :icon="['fal', 'folder-open']" class="mr-1" fixed-width/> {{ $t('choosefile') }}
              <input type="file" @change="previewCoverImage" hidden>
            </label>
            <div class="server-img-wrapper float-left">
              <img v-if="!serverImgUrl" class="rounded-circle server-img img-thumbnail" :src="form.serverimg" alt="">
              <img v-else class="rounded-circle server-img img-thumbnail" :src="serverImgUrl" alt="">
            </div>
            <label class="upload-serverimg btn btn-secondary">
              <fa :icon="['fal', 'folder-open']" class="mr-1" fixed-width/> {{ $t('choosefile') }}
              <input id="fileupload" @change="previewServerImage" type="file" hidden>
            </label>
          </div>
        </div>
        <div class="card-body">
          <div class="validation-coverimg mb-2" v-if="form.errors.has('coverimg')">
            {{ form.errors.get('coverimg') }}
          </div>
          <div class="validation-serverimg mb-2" v-if="form.errors.has('serverimg')">
            {{ form.errors.get('serverimg') }}
          </div>
          <div class="row mb-3">
            <div class="col-md-8">
              <label for="servername">{{ $t('servername') }}</label>
              <input v-model="form.name" :class="{ 'is-invalid': form.errors.has('name') }" type="text" id="servername" name="name" class="form-control">
                <has-error :form="form" field="name" />
            </div>
            <div class="col-md-4">
              <label for="serverid">{{ $t('serverid') }}</label>
              <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon3">https://dzsa.me/</span>
              </div>
              <input v-model="form.serverid" :class="{ 'is-invalid': form.errors.has('serverid') }" type="text" id="serverid" name="name" class="form-control">
                  <has-error :form="form" field="serverid" />
            </div>
            </div>
          </div>
          <div class="row mb-4">
            <div class="col-md-12">
            <label for="description">{{ $t('description') }}</label>
            <textarea v-model="form.description" :class="{ 'is-invalid': form.errors.has('description') }" class="form-control" id="description" rows="3"></textarea>
            <has-error :form="form" field="description" />
            </div>
          </div>
          <strong>{{ $t('connection') }}</strong>
          <hr>
          <div class="row mb-3">
            <div class="col-md-10">
              <label for="ipaddress">{{ $t('ipaddress') }}</label>
              <input v-model="form.ipaddress" :class="{ 'is-invalid': form.errors.has('ipaddress') }" id="ipaddress" type="text" name="ipaddress" class="form-control">
                <has-error :form="form" field="ipaddress" />
            </div>
            <div class="col-md-2">
              <label for="port">{{ $t('port') }}</label>
              <input v-model="form.port" :class="{ 'is-invalid': form.errors.has('port') }" type="text" id="port" name="port" class="form-control">
                <has-error :form="form" field="port" />
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <label for="cfapikey">{{ $t('cfapikey') }} <span class="text-muted text-small">(optional)</span></label>
              <input type="text" v-model="form.cfapikey" id="cfapikey" class="form-control">
            </div>
          </div>
        </div>
        <div class="card-footer">
          <v-button class="btn btn-success float-right" :loading="form.busy">
            <fa :icon="['fal', 'check']" class="mr-1" fixed-width /> {{ $t('savechanges') }}
          </v-button>
          <router-link :to="{name:'welcome'}" class="btn btn-danger float-right mr-3">
            {{ $t('cancel') }}
          </router-link>
        </div>
      </div>
    </form>
  </div>
</template>
<script>
import axios from 'axios'
import Form from 'vform'
import { mapGetters } from 'vuex'
export default {
  middleware: 'auth',

  computed: mapGetters({
    user: 'auth/user'
  }),
  
  head () {
    return { title: this.$t('addserver_site') }
  },

  async asyncData({ $axios, params }) {
    const data = await axios.get('/server/' + params.serverid)
    return {
      form: new Form(data.data),
      serverImgUrl: '',
      coverImgUrl: ''
    }
  },

  methods: {
    previewCoverImage(e) {
      const file = e.target.files[0];
      this.coverImgUrl = URL.createObjectURL(file);
      this.form.coverimg = file
    },
    previewServerImage(e) {
      const file = e.target.files[0];
      this.serverImgUrl = URL.createObjectURL(file);
      this.form.serverimg = file
    },
    async editServer () {
      await this.form.patch('/server/edit/' + this.$route.params.serverid, {
        transformRequest: [function (data, headers) {
          return objectToFormData(data)
        }]
      })
      .then(({ data }) => {
        console.log('data: ' + data)
      })
      .catch(({ error }) => { 
        console.log(this.form)
        console.log('error: ' + error)
      })
    }
  }
}
</script>