Can't set selected option just using ID

[jhob101]

• Vue Version: 3.2.36
• Vue Select Version: 4.0.0-beta.3

Describe the bug

I store the select option as just the id. When the select is initialised I want to set the selected item using just the id.

Here's a simplified version of the code, the production version is more complicated as it involves a pinia store, which is why I'm not using v-model.

<template>
  <v-select
      placeholder="Select Accommodation..."
      :options="accommodations"
      :value="accommodationId"
      @option:selected="setAccommodationId"
      :reduce="(option) => option.id"
  ></v-select>
</template>
<script>
  import vSelect from 'vue-select';
  import 'vue-select/dist/vue-select.css';
  export default {
    data(): {
      return {
        accommodationId: 2,
        accommodations: [{id: 1, label: 'one'}, {id:2, label: 'two'}, {id:3, label:'three'}, {id:4, label:'four'}]
      }
    },
    methods: {
      setAccommodationId(selected) {
        this.accommodationId = selected.id;
      }
    }
  }
</script>

Now I have found that I can do this, which achieves what I want:

...
<v-select
    placeholder="Select Accommodation..."
    :options="accommodations"
    :modelValue="selectedAccommodation"
    @option:selected="setAccommodationId"
    :reduce="(option) => option.id"
></v-select>

...
selectedAccommodation() {
  return this.accommodations.filter(obj => {
    return obj.id === this.accommodationId
  })

But that feels like a bit of a hack.

I can't find a more generally supported way of doing this in the documentation. Am I missing something or does this feature not exist? If it doesn't exist then it seems like a bug as values would typically be stored as the id and so should be able to be set as just the id.