Add watch for props.selected in Select.vue

src/components/Select.vue

@@ -4,7 +4,7 @@ interface DataItem {
   name: any
 }
 
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { RichSelect } from '@flavorly/vanilla-components'
 
 const props = defineProps({
@@ -21,10 +21,25 @@ const props = defineProps({
     default: () => ({ id: 0, name: '' })
   }
 })
-const emit = defineEmits(['update:selected'])
 
+const emit = defineEmits(['update:selected'])
 const data = computed(() => [{ id: 0, name: props.placeholder }, ...props.data])
 const selected = ref(data.value[0].id)
+
+computed(() => {
+  if (props.selected.id === 0) {
+    selected.value = 0
+  }
+})
+
+watch(
+  () => props.selected,
+  (value: any) => {
+    if (value.id === 0) {
+      selected.value = 0
+    }
+  }
+)
 </script>
 
 <template>