diff --git a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
index 6bff458..17d59b0 100644
--- a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, watch, computed } from "vue"
+import { ref, reactive, watch, computed, onMounted } from "vue"
 import type { FormData, FormRef } from "@/modules/05_leave/interface/request/FollowSpouseForm"
 import { useCounterMixin } from "@/stores/mixin"
 
@@ -127,26 +127,6 @@ function updateLeaveTotal() {
 	formData.leaveTotal = newLeaveTotal
 	console.log("test")
 }
-
-/**
- * function check ว่าถ้ามีค่ามาเเล้วจะเป็น readonly
- */
-const isReadOnly = ref(false)
-watch(formData.followHistoryCountry, newVal => {
-	isReadOnly.value = !!newVal
-})
-
-watch(formData.followHistoryTime, newVal => {
-	isReadOnly.value = !!newVal
-})
-
-watch(formData.followHistoryStart, newVal => {
-	isReadOnly.value = !!newVal
-})
-
-watch(formData.followHistoryEnd, newVal => {
-	isReadOnly.value = !!newVal
-})
 </script>
 
 <template>
@@ -372,7 +352,7 @@ watch(formData.followHistoryEnd, newVal => {
 					borderless
 					:enableTimePicker="false"
 					week-start="0"
-					:readonly="isReadOnly"
+					:readonly="formData.followHistoryStart !== null"
 				>
 					<template #year="{ year }">
 						{{ year + 543 }}
@@ -387,7 +367,7 @@ watch(formData.followHistoryEnd, newVal => {
 							ref="followHistoryStartRef"
 							for="followHistoryStartRef"
 							hide-bottom-space
-							:readonly="isReadOnly"
+							:readonly="formData.followHistoryStart !== null"
 							bg-color="white"
 							class="full-width datepicker"
 							:model-value="formData.followHistoryStart != null ? date2Thai(formData.followHistoryStart) : null"
@@ -410,7 +390,7 @@ watch(formData.followHistoryEnd, newVal => {
 					borderless
 					:enableTimePicker="false"
 					week-start="0"
-					:readonly="isReadOnly"
+					:readonly="formData.followHistoryEnd !== null"
 				>
 					<template #year="{ year }">
 						{{ year + 543 }}
@@ -426,7 +406,7 @@ watch(formData.followHistoryEnd, newVal => {
 							for="followHistoryEndRef"
 							hide-bottom-space
 							bg-color="white"
-							:readonly="isReadOnly"
+							:readonly="formData.followHistoryEnd !== null"
 							class="full-width datepicker"
 							:model-value="formData.followHistoryEnd != null ? date2Thai(formData.followHistoryEnd) : null"
 							:label="`${'ถึงวันที่'}`"
@@ -449,13 +429,13 @@ watch(formData.followHistoryEnd, newVal => {
 					v-model="formData.followHistoryCountry"
 					label="ประเทศ"
 					:rules="[val => !!val || `${'กรุณาเลือกประเทศ'}`]"
-					:readonly="isReadOnly"
+					:readonly="formData.followHistoryCountry !== ''"
 				/>
 				<q-input
 					class="col-12 col-md-3 col-sm-12"
 					dense
 					outlined
-					:readonly="isReadOnly"
+					:readonly="formData.followHistoryTime !== ''"
 					hide-bottom-space
 					bg-color="white"
 					ref="followHistoryTimeRef"