fix: Selection not working in country autocomplete

frontend/src/components/CountryListItem.vue

@@ -1,45 +1,44 @@
 <script setup lang="ts">
 // Define props with proper TypeScript typing
 import { computed } from "vue";
+import type { CountryListItemType } from "@/utils/countries.ts";
 
-interface Country {
-  country: string;
-  alpha2: string;
-  alpha3: string;
-  numeric: string;
+type ListItem<T> = {
+  raw: T;
 }
 
-interface Divider {
-  divider: boolean;
-  header: string;
-}
-
-// Define a type that can be either a Country or a Divider
-type CountryListItemType = Country | Divider;
-
 // Define props with proper TypeScript typing
 const props = defineProps<{
-  item: { raw: CountryListItemType };
-  props?: Record<string, unknown>;
+  item: ListItem<CountryListItemType>;
+  itemProps?: Record<string, unknown>;
 }>();
 
 // Helper functions to check the type of the item
 const isDivider = computed(() => {
-  return 'divider' in props.item.raw && props.item.raw.divider;
+  return "divider" in props.item.raw && props.item.raw.divider;
 });
 
 const headerText = computed(() => {
-  return 'header' in props.item.raw ? props.item.raw.header : "";
+  return "header" in props.item.raw ? props.item.raw.header : "";
 });
 
 const countryItem = computed(() => {
-  return !isDivider.value && !headerText.value && 'country' in props.item.raw ? props.item.raw: undefined;
-})
+  return !isDivider.value && !headerText.value && "country" in props.item.raw ? props.item.raw : undefined;
+});
 
 </script>
 
 <template>
-  <v-divider v-if="isDivider" class="my-2" />
-  <v-list-subheader v-if="headerText">{{ headerText }}</v-list-subheader>
-  <v-list-item v-if="countryItem" v-bind="props" :title="countryItem.country" :value="countryItem.alpha2" />
+  <v-divider
+    v-if="isDivider"
+    class="my-2"
+  />
+  <v-list-subheader v-if="headerText">
+    {{ headerText }}
+  </v-list-subheader>
+  <v-list-item
+    v-if="countryItem"
+    v-bind="itemProps"
+    :title="countryItem.country"
+  />
 </template>