Validation on clonned fields in vue js and laravel - laravel

Question

I am stuck with some issue while using vue and laravel. From the vue JS I am clonning the fields like address or cities to multiple clone. I am trying to submit the form without filling those fields It should show the errors under each box (validation error).
here is the code I am using ---
in the .vue file ---
<template>
<div class="container">
<h2 class="text-center">Add User</h2>
<div class="row">
<div class="col-md-12">
<router-link :to="{ name: 'Users' }" class="btn btn-primary btn-sm float-right mb-3">Back</router-link>
</div>
</div>
<div class="row">
<div class="col-md-12">
<ul>
<li v-for="(error, key) in errors" :key="key">
{{ error }}
</li>
</ul>
<form>
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" v-model="user.name">
<span class="text-danger">{{ errors.name }}</span>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" v-model="user.email">
<span class="text-danger">{{ errors.email }}</span>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" v-model="user.password">
<span class="text-danger">{{ errors.password }}</span>
</div>
<button type="button" class="btn btn-primary btn-sm float-right mb-3" #click="addMoreAddress()">Add More</button>
<template v-for="(addressNo, index) in addresses">
<h5>Address ({{addressNo}}) </h5>
<div class="form-group">
<label>Address</label>
<textarea type="text" rows="5" class="form-control" v-model="user.addresses[index].address"></textarea>
<span class="text-danger">{{ errors.addresses }}</span>
</div>
<div class="form-group">
<label>City</label>
<input type="text" class="form-control" v-model="user.addresses[index].cities">
<span class="text-danger">{{ errors.addresses }}</span>
</div>
</template>
<button type="button" class="btn btn-primary" #click="createUser()">Create</button>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
user: {
name: '',
email: '',
password: '',
addresses: [
{
address: '',
cities : ''
}
]
},
errors: {},
addresses: 1
}
},
methods: {
createUser() {
let vm = this;
axios.post('api/users', vm.user)
.then(({data}) => {
// vm.$router.push('/users');
})
.catch((error) => {
let errorsMessages = error.response.data;
console.log(errorsMessages);
const errors = {};
if (Object.keys(errorsMessages).length) {
Object.keys(errorsMessages.errors).forEach((key) => {
errors[key] = errorsMessages.errors[key][0];
});
}
vm.errors = errors;
});
},
addMoreAddress() {
this.user.addresses.push({address:'',cities:''});
this.addresses++;
}
}
}
</script>
and in the laravel I am using the following code (for validation)---
$data = Validator::make($request->all(), [
'name' => 'required|string',
'email' => 'required|string|email|unique:users',
'password' => 'required|string|min:8',
'addresses.*.address' => 'required',
'addresses.*.cities' => 'required',
]);
$errors = $data->errors();
if ($data->fails()) {
return response()->json([
'errors' => $errors
], 422);
}
When I try to submit the form without filling the record. from the api it returing like ---
But I am not able to show the error under each field for address and city. If i print the response it works fine and for name as well. I want the same error message view like showing under name field.
Thanks in advance for helping hands..