I am using vform in vue.js to get data from a row for editing but this is the error i get. Cannot read property 'fill' of undefined - laravel

Question

this is the variable that holds the form data
userForm: new Form({
last_name: '',
first_name: '',
other_name: '',
email: '',
dob: '',
gender: '',
phone_number: '',
}),
on click of the edit button, i use the row id to fetch the data from backend and am using vform method fill to fill the userForm variable with the response data
'click .edit': function (e, value, row){
axios
.get('/data/admin/'+row.id)
.then(response => {
this.loading = false;
//let data = response;
this.userForm.fill(response.data);
$('#adminEditModal').modal('show');
}).catch(error => {
this.loading = false;
this.error = error.response.data.message || error.message;
});
},
this is my form
<form #submit.prevent="UpdateUser" ref="userForm">
<div class="modal-body">
<div class="login-logo">
<img src="" width="100" height="auto" alt="user">
</div>
<div class="form-group">
<label>Last Name</label>
<input v-model="userForm.last_name" type="text" name="last_name"
class="form-control" :class="{ 'is-invalid': userForm.errors.has('last_name') }">
<has-error :form="userForm" field="last_name"></has-error>
</div>
<div class="form-group">
<label>Firat Name</label>
<input v-model="userForm.first_name" type="text" name="first_name"
class="form-control" :class="{ 'is-invalid': userForm.errors.has('first_name') }">
<has-error :form="userForm" field="first_name"></has-error>
</div>
<div class="form-group">
<label>Other Name</label>
<input v-model="userForm.other_name" type="text" name="other_name"
class="form-control" :class="{ 'is-invalid': userForm.errors.has('other_name') }">
<has-error :form="userForm" field="other_name"></has-error>
</div>
<div class="form-group">
<label>Email</label>
<input v-model="userForm.email" type="email" name="email"
class="form-control" :class="{ 'is-invalid': userForm.errors.has('email') }">
<has-error :form="userForm" field="email"></has-error>
</div>
<div class="form-group">
<label>Date Of Birth</label>
<input v-model="userForm.dob" type="date" name="dob"
class="form-control" :class="{ 'is-invalid': userForm.errors.has('dob') }">
<has-error :form="userForm" field="dob"></has-error>
</div>
<div class="form-group">
<label>Gender</label>
<select v-model="userForm.gender" type="text" name="gender"
class="form-control" :class="{ 'is-invalid': userForm.errors.has('gender') }" >
<option>Male</option>
<option>Female</option>
</select>
<has-error :form="userForm" field="gender"></has-error>
</div>
<div class="form-group">
<label>Phone Number</label>
<input v-model="userForm.phone_number" type="text" name="phone_number"
class="form-control" :class="{ 'is-invalid': userForm.errors.has('phone_number') }">
<has-error :form="userForm" field="phone_number"></has-error>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">Update <i class="fas fa-upload"></i></button>
</div>
</form>