Setting default value in USelectMenu

I am trying to populate a USelectMenu and set a default value. However the control shows the id and not the label:

This is my code:

<template>
  <div class="p-8">
    <h1 class="text-2xl font-bold mb-4">
      Test Page
    </h1>
    <p class="mb-2">
      This is a minimal Vue page.
    </p>
    <div>
      <div>{{ companyOptionsTest }}</div>
      <USelectMenu
        v-model="selectedCompanyTest"
        :items="companyOptionsTest"
        placeholder="Select a company"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

let testCompanies = [
  {
    "id": "458d7c38-7d9c-4641-9d18-9409b1d04377",
    "name": "Test1",
    "type": "",
    "country": "",
    "contacts": [
      {
        "id": "5ddb52dc-47cd-49d6-9953-d4ca88319a5a",
        "firstName": "Eric",
        "lastName": "Yang",
        "salutation": "Mr",
        "email": "",
        "phoneNumber": ""
      },
      {
        "id": "0750316f-3428-417e-a226-15886b1731ce",
        "firstName": "Erik",
        "lastName": "Lee",
        "salutation": "",
        "email": "",
        "phoneNumber": ""
      },
      {
        "id": "cabcd68d-0a6e-41d8-bcf4-a5772d7c5b57",
        "firstName": "mmkk",
        "lastName": "k",
        "salutation": "",
        "email": "k",
        "phoneNumber": "k"
      }
    ]
  },
  {
    "id": "5ef5cabf-ac5c-4639-a04b-617ac17e8906",
    "name": "Test2",
    "type": "",
    "country": "",
    "contacts": [
      {
        "id": "8afd7173-046a-426e-824c-f2c1bacf3778",
        "firstName": "Roberto",
        "lastName": "Tester",
        "salutation": "",
        "email": "",
        "phoneNumber": ""
      },
      {
        "id": "090f5fed-2466-41fc-abae-ef935bf6f96e",
        "firstName": "Tester",
        "lastName": "Kjo",
        "salutation": "",
        "email": "",
        "phoneNumber": ""
      }
    ]
  },
  {
    "id": "a7403568-1dcf-40d5-b611-58defaba75fc",
    "name": "Bernard Test3",
    "type": "",
    "country": "",
    "contacts": [
      {
        "id": "216b37fc-ee90-41a8-8edb-9430d9389fdd",
        "firstName": "James",
        "lastName": "",
        "salutation": "",
        "email": "",
        "phoneNumber": ""
      },
      {
        "id": "c3dc77fc-ad81-4d27-8df1-d13a557d3974",
        "firstName": "Q",
        "lastName": "LOL",
        "salutation": "",
        "email": "",
        "phoneNumber": ""
      },
      {
        "id": "5a35be30-396a-4f98-8792-fcaa92352960",
        "firstName": "dfsfsd",
        "lastName": "asdasdas",
        "salutation": "",
        "email": "",
        "phoneNumber": ""
      }
    ]
  },
  {
    "id": "2ba1ce4c-00e5-4476-a245-25e0cfd3fdbc",
    "name": "Besiktas",
    "type": "",
    "country": "",
    "contacts": [
      {
        "id": "ac728279-59fc-4ab3-a001-45cd652b9723",
        "firstName": "A Adam",
        "lastName": "Bro",
        "salutation": "dssdffsf11",
        "email": "sadasdas11",
        "phoneNumber": "virker2"
      },
      {
        "id": "551e4bca-ad31-471a-a940-d7eb417cd487",
        "firstName": "Omer",
        "lastName": "",
        "salutation": "",
        "email": "",
        "phoneNumber": ""
      }
    ]
  },
  {
    "id": "3a406785-9f2b-41f0-99a1-cb6f8605f504",
    "name": "Bihar",
    "type": "",
    "country": "",
    "contacts": [
      {
        "id": "4b72120f-70c4-445c-98d7-d6dcfe440635",
        "firstName": "Stella",
        "lastName": "TEST",
        "salutation": "",
        "email": "",
        "phoneNumber": ""
      }
    ]
  }
];

const companyOptionsTest = testCompanies.map(company => ({
  label: company.name,
  value: company.id
}));

// Set default to Bihar's id
const selectedCompanyTest = ref(
  testCompanies.find(c => c.name === 'Bihar')?.id || null
);
</script>

<style scoped>
/* You can add page-specific styles here */
</style>

It's because you explicitly set the v-model to the id value, as is explained by your own commented code:

// Set default to Bihar's id
const selectedCompanyTest = ref(
  testCompanies.find(c => c.name === 'Bihar')?.id || null
);

Which after execution is equivalent to:

const selectedCompanyTest = ref("3a406785-9f2b-41f0-99a1-cb6f8605f504")

However, the USelectMenu expects v-model to be bound to an item from the items array - in this case, an object with label and value properties, not just the value alone. While this initial id may come from testCompanies, once the user makes a selection, the bound value will be one of the objects from companyOptionsTest. It makes much more sense to initialize selectedCompanyTest using the same array (companyOptionsTest) that's passed into the items prop, and of course without explicitly setting it to the id value:

const selectedCompanyTest = ref(
  companyOptionsTest.find(c => c.label === 'Bihar') || undefined
);

Also, if you want correct typing, it should be || undefined instead of null, as seen above.