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


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">
    <input v-model="value.data" class="select-input" />     
  </div>
</template>

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