Select not showing it's value after opening popup (v2 Vue)

Hi there,
I have this input select:

       <f7-input 
          v-if="courses.length > 0" 
          type="select" 
          :value="selectedCourseIndex" 
          @change="selectedCourseIndex = $event.target.value"
        > 
          <option 
            v-for="(courseBadge, index) in courses" 
            :key="index" 
            :value="index"
          >
            {{courseBadge.name}}
          </option>
        </f7-input>

It works great, but after I open a popup and close that popup which makes this page with the input visible again, the value is not displayed. When I click at the location where the input is located, I do open the select and the first value is actually selected. It just doesn’t show in the page.

Am I doing something wrong?