Массив динамического зависимого поля выбора в Vue.js

У меня есть массив поля выбора Depend, который содержит университеты и курсы. В каждом университете есть свой курс. и я построил раскрывающийся список курсов, который зависит от университета. Я могу успешно получить университетский курс по запросу сервера, но проблема в том, что когда я меняю выбранный университет, он меняет все поля курса. Как я могу решить эту проблему, дайте мне несколько идей. Спасибо

<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>

проверить снимок экрана

http://prntscr.com/115mkn5