<script setup>
const props = defineProps({
  options: {
    type: Array,
    default: () => [],
  },
})
const emit = defineEmits(['update:options'])
const selectedOption = computed(
  {
    get() {
      const opt = !!props.options && props.options.find(option => option.status === true)
      return opt ? opt.name : ''
    },
    set(newVal) {
      props.options.forEach((option) => {
        option.status = option.name === newVal
      })
      emit('update:options', props.options)
    },
  })
</script>

<template>
  <select v-model="selectedOption" @change="handleChange">
    <option v-for="option in props.options" :key="option" :selected="selectedOption === option.name">
      {{ option.name }}
    </option>
  </select>
</template>

<style lang="scss" scoped>

</style>
