Array of Dynamic Dependent Select Box in Vue.js

Hi, I have an array of Depend select box which contains Universities and courses. Each university has its own course. and I have built the course dropdown which depends on the university. I can successfully get university course from server request but the problem is when I change the select university it's changing all course fields. How I can get rid of the problem please give me some ideas. Thanks

<template>
  <form @submit.prevent="handleSubmit">
    <div class="col col-md-12">
      <div v-for="(interest, index) in interests" :key="index" class="row">
        <div class="col col-md-6">
          <div class="form-group mb-4">
            <label for="select-ins">Interested Universities </label>
            <select
              v-model="interest.institute_id"
              class="form-control"
              @change="onChangeUniversity($event)"
            >
              <option disabled value="">Select a University</option>
              <option
                v-for="institute in institutes"
                :key="institute.id"
                :value="institute.id"
              >
                {{ institute.institute_name }}
              </option>
            </select>
          </div>
        </div>
        <div class="col col-md-6">
          <div class="form-group mb-4">
            <label>Interested Course</label>
            <select
              v-model="interest.course_id"
              class="form-control"
              @change="onChangeCourse($event)"
            >
              <option disabled value="">Select a Course</option>
              <option
                v-for="course in courses"
                :key="course.id"
                :value="course.id"
              >
                {{ course.course_name }}
              </option>
            </select>
          </div>
        </div>
        <div class="col col-md-12 text-right">
          <div class="row ml-4">
            <div v-show="index == interests.length - 1">
              <button
                class="btn btn-warning mb-2 mr-2 btn-rounded"
                @click.prevent="add"
              >
                Add
              </button>
            </div>
            <div v-show="index || (!index && interests.length > 1)">
              <button
                class="btn btn-danger mb-2 mr-2 btn-rounded"
                @click.prevent="remove"
              >
                Remove
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      institutes: [],
      courses: [],
      interests: [
        {
          institute_id: "",
          course_id: "",
        },
      ],
    };
  },
  mounted() {
    axios.get("/institues").then((res) => {
      this.institutes = res.data;
    });
  },
  methods: {
    onChangeUniversity(event) {
      let universityId = event.target.value;
      axios.get(`/institute-course/${universityId}`).then((res) => {
        this.courses = res.data;
      });
    },
    add() {
      this.interests.push({
        institute_id: "",
        course_id: "",
      });
    },
    remove(index) {
      this.interests.splice(index, 1);
    },
  },
};
</script>

check screenshot

http://prntscr.com/115mkn5