Refactor Select component and update Type1.vue

The commit message suggests that the developer refactored the Select component and made updates to the Type1.vue file.

src/components/Select.vue

@@ -4,7 +4,7 @@ interface DataItem {
   name: string;
 }
 
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, watch } from 'vue'
 import {
   Combobox,
   ComboboxInput,
@@ -18,17 +18,37 @@ import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'
 const props = defineProps({
   placeholder: {
     type: String,
-    default: ''
+    default: '0'
   },
   data: {
     type: Array as () => DataItem[],
     default: []
+  },
+  selected: {
+    type: Object as () => DataItem,
+    default: () => ({ id: 0, name: '' })
   }
 })
 const emit = defineEmits(["update:selected"])
 
 const data = computed(() => [{ id:0, name: props.placeholder }, ...props.data]);
 
+computed(() => {
+  if (props.selected.id === 0) {
+    selected.value = { id:0, name: props.placeholder }
+  }
+
+  console.log('selected', selected.value.name);
+  
+})
+
+watch(() => props.selected, (value) => {
+  if (value.id === 0) {
+    selected.value = { id:0, name: props.placeholder }
+  }
+})
+
+
 let selected = ref<DataItem>(data.value[0])
 let query = ref('')
 let filteredData = computed(() =>
@@ -44,9 +64,6 @@ let filteredData = computed(() =>
 
 const show = ref(false)
 
-onMounted(() => {
-})
-
 
 </script>
 
@@ -61,7 +78,7 @@ onMounted(() => {
           :displayValue="(item: any) => (show || open ? '' : item.name)" @change="query = $event.target.value"
           @click="show = true" @blur="show = false" defaultValue="" />
 
-        <ComboboxButton id="Test" class="absolute inset-y-0 right-0 flex items-center pr-2">
+        <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
           <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
         </ComboboxButton>
       </div>