I recently made a migration from Vue 2 to Vue 3 and fixing errors with the included Vuetify upgrade. I have a v-select which should show all the countries in additionalCitizenshipQuestion.countries, which is like 200 countries or so.

In Vue 2 when I pressed the select it only printed like 30-40 and when I scrolled it sort of auto expanded the scrollbar until I reached the 200th country (if that makes sense).

However, now in Vue 3 it only prints out the first 67 countries of the list and I have no idea why. Here is the v-select component with its additional items:

<v-select density="compact" variant="outlined" :label="$t(additionalCitizenshipQuestion.label)"
    :items="additionalCitizenshipQuestion.countries" v-model="additionalCitizenship" item-value="code" item-title="name"
    multiple="mulitple">
    <template v-slot:item="{ item, attrs, on }">
      <v-list-item v-on="on" v-bind="attrs">
        <div class="country-dropdown-list">
          <v-list-item-action>
            <v-checkbox v-model="additionalCitizenship" :value="item.value" style="height: 40px;"></v-checkbox>
          </v-list-item-action>
          <v-list-item-content class="country-list-item-content">
            <v-list-item-icon>
              <country-flag :country="item.value" />
            </v-list-item-icon>
            <v-list-item-title>
              {{ item.props.title }}
            </v-list-item-title>
          </v-list-item-content>
        </div>
      </v-list-item>
    </template>
  </v-select>
<template>

And the countries list is built like this:

[
    {
        "code": "AD",
        "name": "Andorra"
    },
    {
        "code": "AE",
        "name": "United Arab Emirates"
    },
    {
        "code": "AF",
        "name": "Afghanistan"
    },
    {
        "code": "AG",
        "name": "Antigua and Barbuda"
    },
    ...
]

Why is it now showing all my countries in the list?