[Vuejs]-Array of Dynamic Dependent Select Box in Vue.js

lets start at your mounted hook.
you call for a API to receive all available institutes. so far so good. each institute got is own ID, this is important for later, lets keep that in mind.

now your using a function which will then call on a "change" event, like onChangeUniversity this is a good way on preventing to overload data in a page, nice idea just to fetch data only when they are needed.

then comes the tricky part which makes it difficult for you and everyone else reading your code.

you have this courses array in your data which normally belongs to the related institute. this array should not be handled as a second array apart from institutes, it should be a child of it.

like check this data structur:

institutes: [
        {
          institute_name: "WhatEver1",
          id: 0,
          courses: [{ course: 1 }, { course: 2 }, { course: 3 }],
        }
      ]

instead of this:

institutes: [
        {
          institute_name: "WhatEver1",
          id: 0,
        },
      ],
courses: [{ course: 1 }, { course: 2 }, { course: 3 }],

the first option above is a good nested way to display your data as loop inside a loop.
which means you have to push your courses inside your institute of choice with the belonged id.

your onChangeUniversity function should than do something like this:

onChangeUniversity(event) {
      let universityId = event.target.value;
      axios.get(`/institute-course/${universityId}`).then((res) => {
        const foundedId = this.institutes.findIndex(institute => institute.id === universityId)
        this.institutes[foundedId].courses = res.data
      });
    },

after that its much easier to iterate over and display the data inside the options. and i am sure you will not have that issue anymore.
just try it like that first and give feedback.

Update

<div class="form-group mb-4">
            <label>Interested Course</label>
            <select
              v-model="interest.course_id"
              v-if="institute.courses.length !== 0" <-------HERE
              class="form-control"
              @change="onChangeCourse($event)"
            >
              <option disabled value="">Select a Course</option>
              <option
                v-for="course in institute.courses"
                :key="course.id"
                :value="course.id"
              >
                {{ course.course_name }}
              </option>
            </select>
          </div>

you need a render condition to stop your courses loop from being iterated when there is no data inside.

also make sure you await till the fetching of courses is completed.

async onChangeUniversity(event) {
      let universityId = event.target.value;
      await axios.get(`/institute-course/${universityId}`).then((res) => {
        this.courses = res.data;
      });
    },

and also in your mounted hook

async mounted() {
    await axios.get("/institues").then((res) => {
      this.institutes = res.data;
    });
  },

if you still struggle please give me a CodeSandbox of your current code.