Vuetify v-select – set default values for multi select

I'm trying to set the defaults values of the v-select component. At the moment it only appears to be setting it to the first value. Within our app we allow the user to select options which are pulled from an API. The issue we faced is using the standard v-select there were far too many options. Therefore I created a way around this using the v-datatable to select the options:

After selecting however, my v-select only shows the first item I checked and not the rest:

<v-select
  v-model="selectValue"
  chips
  multiple
  :items="selectItems"
/>

Here's the selectValue and selectItems methods:

setItems() {
    const items = [];

    if (!_.isEmpty(this.items[this.model])) {
        items.push({
            text: this.items[this.model][0][field],
            value: this.items[this.model][0].id
        });
    }

    this.selectItems = items;
},

setValue() {
    if (!_.isEmpty(this.items[this.model])) {
        const items = [];

        _.values(this.items[this.model]).forEach(value => {
            items.push({
                text: value.name,
                value: value.id,
            });
        });

        this.selectValue = items;
    }
},

However this only appears to be setting the default value as the first item:

If I use the vue tools I can see that the initial and lazy values are set:

However the selectedItems isn't correct. Am I missing something here? I thought setting the v-model would handle this! Thanks

Read more here: https://stackoverflow.com/questions/66336747/vuetify-v-select-set-default-values-for-multi-select