Making Vue Select component reusable (Laravel), returns [object Object]

Question

I'm trying to create a reusable select component - initially, just to prove things were working I loaded the select directly in the vue file - which works with data.

I have the following in php controller:

$countries = Country::pluck('name', 'id');

return Inertia::render('Create', compact('countries'));

In the Create.vue file I tested this code which works:

<select class="form-control" v-model="selCountry">
<option v-for="(country, id) in countries" :key="id" :value="id">
{{ country }}
</option>
</select>

When I tried to make the select component reuseable, I would keep getting [object Object] being returned here is the code:

Select-Component.vue

<template>
  <select
    class="form-control"
    @change="$emit('update:modelValue', $event.target.value)"
    ref="select"
  >
    <option
      v-for="(data, key) in options"
      :key="key"
      :value="key"
      :selected="data === modelValue"
    >
      {{ data }}
    </option>
  </select>
</template>

<script>
export default {
  props: ["modelValue", "options"],

  emits: ["update:modelValue"],

  methods: {
    focus() {
      this.$refs.select.focus();
    },
  },
};
</script>

Btw here is some example data that is being passed from php to vue:

    101 => "Germany"
    225 => "UK"

Thanks in advance.

and finally loading the component with:

<select id="countries" :options="countries" />

Update: sorry just to add I am trying to achieve this without using any npm packages.

Thanks