Vuetify: How to correctly set active item when using prepend on v-select

Question

When I use the prepend-item v-slot for the v-select component, selecting an item actives another item instead of the one that was selected.

Take this code pen example found on the vuetify docs. Notice that when you select any item in the list, the item that is 2 places above the selected item is the one that is highlighted. For example, selecting "Avocado" highlights the "Apples" item.

<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-select
        v-model="selectedFruits"
        :items="fruits"
        label="Favorite Fruits"
        multiple
      >
        <template v-slot:prepend-item>
          <v-list-item
            ripple
            @mousedown.prevent
            @click="toggle"
          >
            <v-list-item-action>
              <v-icon :color="selectedFruits.length > 0 ? 'indigo darken-4' : ''">
                {{ icon }}
              </v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title>
                Select All
              </v-list-item-title>
            </v-list-item-content>
          </v-list-item>
          <v-divider class="mt-2"></v-divider>
        </template>
        <template v-slot:append-item>
          <v-divider class="mb-2"></v-divider>
          <v-list-item disabled>
            <v-list-item-avatar color="grey lighten-3">
              <v-icon>
                mdi-food-apple
              </v-icon>
            </v-list-item-avatar>
  
            <v-list-item-content v-if="likesAllFruit">
              <v-list-item-title>
                Holy smokes, someone call the fruit police!
              </v-list-item-title>
            </v-list-item-content>
  
            <v-list-item-content v-else-if="likesSomeFruit">
              <v-list-item-title>
                Fruit Count
              </v-list-item-title>
              <v-list-item-subtitle>
                {{ selectedFruits.length }}
              </v-list-item-subtitle>
            </v-list-item-content>
  
            <v-list-item-content v-else>
              <v-list-item-title>
                How could you not like fruit?
              </v-list-item-title>
              <v-list-item-subtitle>
                Go ahead, make a selection above!
              </v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </template>
      </v-select>
    </v-container>
  </v-app>
</div>

It looks as though in the above example, because there are 2 components in the template used in the v-slot (v-list-item and v-divider), the highlighted item will always be 2 above the item you select. It's like these prepended components are included in the index used to track the active item, hence it's always off by n number of prepended components.

Does anyone know how to resolve this issue and highlight the correct item when selecting from the v-select?