Clean form fields after sent with Vue2 and Axios

I have a form that sends, in Vue.js , by axios without any problem the data, and I wish that after successfully sent, the content of the fields is deleted. I have tried with .reset() but without success, and for some reason I can not use formData normally. I'm also using Bootstrap-vue for the responsive layout, vee-validate as validator and vue-material for the style of the fields.

HTML

<div class="form-section">
            <form @submit.prevent="validateBeforeSubmit" id="form">
                <b-row>
                    <b-col md="6">
                        <md-field>
                            <label for="name">nombre</label>
                            <md-input v-validate="'required'" type="text" name="name" id="name" v-model="name" :class="{'input': true, 'is-danger': errors.has('name') }"></md-input>
                            <span v-show="errors.has('name')" class="error">{{ errors.first('name') }}</span>
                        </md-field>
                    </b-col>
                    <b-col md="6">
                        <md-field>
                            <label for="surname">apellido</label>
                            <md-input v-validate="'required'" type="text" name="surname" id="surname" v-model="surname"></md-input>
                            <span v-show="errors.has('surname')" class="error">{{ errors.first('surname') }}</span>
                        </md-field>
                    </b-col>
                </b-row>
                <b-row>
                    <b-col md="6">
                        <md-field>
                            <label for="identity">dni</label>
                            <md-input v-validate="'required'" type="number" name="identity" id="identity"  v-model="identity"></md-input>
                            <span v-show="errors.has('identity')" class="error">{{ errors.first('identity') }}</span>
                        </md-field>
                    </b-col>
                    <b-col md="6">
                        <md-field>
                                <label for="email">email</label>
                                <md-input v-validate="'required'" type="email" name="email" id="email" v-model="email"></md-input>
                                <span v-show="errors.has('email')" class="error">{{ errors.first('email') }}</span>
                        </md-field>
                    </b-col>
                </b-row>
                <b-row>
                    <b-col md="6">
                        <md-field>
                            <label for="phone">teléfono</label>
                            <md-input v-validate="'required'" type="number" name="phone" id="phone" v-model="phone"></md-input>
                            <span v-show="errors.has('phone')" class="error">{{ errors.first('phone') }}</span>
                        </md-field>
                    </b-col>
                    <b-col md="6">
                        <button type="submit" class="send-button">Enviar</button>
                        <div id="output"></div>
                    </b-col>
                </b-row>
            </form>
        </div>

.vue

import { Validator } from 'vee-validate'
import axios from 'axios'

const dictionary = {
  custom: {
    name: {
      required: () => 'Por favor complete con su nombre.'
    },
    surname: {
      required: () => 'Por favor complete con su apellido.'
    },
    identity: {
      required: () => 'Por favor complete con su dni.'
    },
    email: {
      required: () => 'Por favor complete con su email.'
    },
    phone: {
      required: () => 'Por favor complete con su teléfono.'
    }
  }
}

Validator.localize('en', dictionary)

export default {
  name: 'contact-form',
  data: () => ({
    name: '',
    surname: '',
    identity: '',
    email: '',
    phone: ''
  }),
  methods: {
    validateBeforeSubmit () {
      this.$validator.validateAll().then((result) => {
        // const form = document.getElementById('form')
        const resultElement = document.getElementById('output')
        const formData = new FormData()

        formData.append('name', this.name)
        formData.append('surname', this.surname)
        formData.append('identity', this.identity)
        formData.append('email', this.email)
        formData.append('phone', this.phone)

        if (result) {
          // eslint-disable-next-line
          return axios.post('form/save-form.php', formData, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          })
            .then((response) => {
              resultElement.innerHTML = 'El formulario se ha enviado correctamente'
              this.formData.reset()
            })
        }
        axios.catch((error) => {
          if (error.response) {
            console.log(error.response.data)
            console.log(error.response.status)
            console.log(error.response.headers)
            resultElement.innerHTML = 'Se produjo un error. Intente nuevamente.'
          }
        })
      })
    }
  }
}