How to show Array of errors in Vue.js ? Backend Validation with Laravel

I have some complex data and I want to show the validation error array data in vue file but I can not do it because I have got some data that has an index and showing like contacts.0.name: ["...."]. please share your opinion how I can show the error

Thanks

vue file

<template>
  <div>
    <form enctype="multipart/form-data" @submit.prevent="handleSubmit">
      <div v-for="(contact, index) in contacts" :key="index" class="row">
        <div class="col col-md-3">
          <div class="form-group mb-4">
            <label for="personName">Contact Person Name</label>
            <input
              id="personName"
              v-model="contact.name"
              type="text"
              class="form-control"
            />
            <small> Want to show here the error ? </small
            >
          </div>
        </div>

        <!-- Add or Remove button -->

        <div class="col col-md-12 text-right">
          <div class="row ml-4">
            <div v-show="index == contacts.length - 1">
              <button
                class="btn btn-warning mb-2 mr-2 btn-rounded"
                @click.prevent="add"
              >
                Add More
              </button>
            </div>
            <div v-show="index || (!index && contacts.length > 1)">
              <button
                class="btn btn-danger mb-2 mr-2 btn-rounded"
                @click.prevent="remove"
              >
                Remove
              </button>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      contacts: [
        {
          name: "",
        },
      ],

      errors: [],
    };
  },
  methods: {
    handleSubmit() {
      let data = new FormData();
      data.append("contacts", JSON.stringify(this.contacts));

      Request.POST_REQ(data, "/add-institute")
        .then(() => {
          alert("success");
        })
        .catch((err) => {
          this.errors = err.response.data.errors;
        });
    },
    add() {
      this.contacts.push({
        name: "",
        email: "",
        phone: "",
        alternate_phone: "",
      });
    },
    remove(index) {
      this.contacts.splice(index, 1);
    },
  },
};
</script>

controller file

public function add_institute(Request $request) {
  $request['contacts'] = json_decode($request['contacts'], true);
  $request->validate([
      'contacts.*.name'=> 'unique:institute_contact_people|distinct',
  ]);

  ...rest of code of insert 

  return response()->json("Success...");
}

Getting Error Response data

errors: {
  contacts.0.name: ["The contacts.0.name has already been taken.", "The contacts.0.name field has a duplicate value."]
  0: "The contacts.0.name has already been taken."
  contacts.1.name: ["The contacts.1.name has already been taken.", "The contacts.1.name field has a duplicate value."]
  0: "The contacts.1.name has already been taken."
}

via Chebli Mohamed