fixed select state

frontend/components/global/Select.vue

@@ -13,7 +13,9 @@ type Emit = {
 
 // props
 
-defineProps<Props>();
+const props = defineProps<Props>();
+
+const { modelValue } = toRefs(props);
 
 // emit
 
@@ -21,16 +23,12 @@ const emit = defineEmits<Emit>();
 
 // state
 
-const selectedValue = ref();
+const selectedValue = computed({
+    get: () => modelValue.value,
+    set: (value: string) => emit("update:modelValue", value),
+});
 
 // watch
-
-watch(
-    () => selectedValue.value,
-    (newValue) => {
-        emit("update:modelValue", newValue);
-    }
-);
 </script>
 
 <template>
@@ -41,7 +39,8 @@ watch(
         >
             <SelectValue
                 :placeholder="placeholder"
-                class="text-slate-400 font-iran-yekan-x"
+                :class="selectedValue ? 'text-black' : 'text-slate-400'"
+                class="font-iran-yekan-x"
             />
             <Icon name="bi:chevron-down" size="16" />
         </SelectTrigger>