vuetifyjs selects with 'hide-selected=true' show only listing first 20 items

Possibly that's a bug in vuetify, and I see you're already opened issue on github :)

I think this bug is related to internal virtualizedItems and computedItems properties in vuetify's VSelect class.

Computeditems is an array of items that always cropped to 20 items by default and then 20 more items is added, by example, when you scroll your selectbox. Currently (at least in vuetify 2.2.15) there's no way to manipulate with count of added items.

There's a quick fix of your problem - just add menuProps="auto"to your v-select. It prevents computedItems from cropping. But keep in mind that this may lead to minor visual changes to v-select component. Besides, all of your items will be loaded immediately in v-select component and opening of the component may take longer than usual.

You can also increase the lastItem property of VSelect, which controls the length of the virtual list and is initially set to 20.

(Note, the properties of VSelect may change over versions)

Add a ref to the select

<v-select    ref="select"    v-bind:items="test_data"    v-model="test_modal"    label="Reader permissions"    multiple    chips    deletable-chips    :counter="test_data.length"     hide-selected></v-select>

Change the value of lastItem in mounted()

mounted() {  this.$refs.select.lastItem = 200;},