<script setup lang="ts">
import { ref, onMounted } from 'vue';
import {computed} from 'vue';
const currentYear = new Date().getFullYear();
const years = Array.from({ length: 3 }, (_, i) => currentYear - i);
//const selectedYear = ref(currentYear);

const props = defineProps({'modelValue':{type: Object, required:true}});
const emit = defineEmits(['update:modelValue']);

const value = computed({
  get(){ return props.modelValue; },
  set(val){ emit('update:modelValue', value.value); }
});

 onMounted(()=>{
    console.log("   onMounted     ",props.modelValue)// don't use this keyword   
  })
</script>

<template>
  <div class="year-selector">
    <select v-model="value.data" class="select-input">
      <option v-for="year in years" :key="year" :value="year">
        {{ year }}
      </option>
    </select>
  </div>
</template>

<style scoped>
.select-input {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 200px;
}
</style>