diff --git a/src/components/02_personnel-management/FormByType.vue b/src/components/02_personnel-management/FormByType.vue
index ad833a70..cfca51c6 100644
--- a/src/components/02_personnel-management/FormByType.vue
+++ b/src/components/02_personnel-management/FormByType.vue
@@ -152,7 +152,11 @@ watch(
           :readonly="readonly"
           :label="$t('formDialogInputRegisNo')"
           class="col-12"
-          v-model="registrationNo"
+          :model-value="readonly ? registrationNo || '-' : registrationNo"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (registrationNo = v) : '')
+          "
+          @clear="registrationNo = ''"
         />
         <VueDatePicker
           id="input-startDate"
@@ -187,7 +191,7 @@ watch(
                   ? readonly
                     ? dateFormat(startDate)
                     : dateFormat(startDate, false, false, true)
-                  : ''
+                  : '-'
               "
               @update:model-value="
                 (v) => {
@@ -250,7 +254,7 @@ watch(
                   ? readonly
                     ? dateFormat(retireDate)
                     : dateFormat(retireDate, false, false, true)
-                  : ''
+                  : '-'
               "
               @update:model-value="
                 (v) => {
@@ -296,13 +300,17 @@ watch(
           option-value="value"
           lazy-rules="ondemand"
           id="input-responsible-area"
-          v-model="responsibleArea"
           :dense="dense"
           :readonly="readonly"
           :hide-dropdown-icon="readonly"
           :label="$t('formDialogInputResponsibleArea')"
           :options="responsibleAreaOptions"
           @filter="responsibleAreaFilter"
+          :model-value="readonly ? responsibleArea || '-' : responsibleArea"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (responsibleArea = v) : '')
+          "
+          @clear="responsibleArea = ''"
         >
           <template v-slot:no-option>
             <q-item>
@@ -326,8 +334,12 @@ watch(
           :readonly="readonly"
           :label="$t('formDialogInputDiscount')"
           class="col-12"
-          v-model="discountCondition"
           type="textarea"
+          :model-value="readonly ? discountCondition || '-' : discountCondition"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (discountCondition = v) : '')
+          "
+          @clear="discountCondition = ''"
         />
       </div>
       <div
@@ -349,7 +361,6 @@ watch(
           option-label="label"
           lazy-rules="ondemand"
           class="col-md-3 col-6"
-          v-model="sourceNationality"
           id="input-source-nationality"
           :dense="dense"
           :readonly="readonly"
@@ -357,6 +368,11 @@ watch(
           :label="$t('formDialogInputSourceNationality')"
           :options="nationalityOptions"
           @filter="nationalityFilter"
+          :model-value="readonly ? sourceNationality || '-' : sourceNationality"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (sourceNationality = v) : '')
+          "
+          @clear="sourceNationality = ''"
         >
           <template v-slot:no-option>
             <q-item>
@@ -380,7 +396,6 @@ watch(
           option-label="label"
           class="col-md-3 col-6"
           lazy-rules="ondemand"
-          v-model="importNationality"
           id="input-import-nationality"
           :dense="dense"
           :readonly="readonly"
@@ -388,6 +403,11 @@ watch(
           :label="$t('formDialogInputImportNationality')"
           :options="nationalityOptions"
           @filter="nationalityFilter"
+          :model-value="readonly ? importNationality || '-' : importNationality"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (importNationality = v) : '')
+          "
+          @clear="importNationality = ''"
         >
           <template v-slot:no-option>
             <q-item>
@@ -411,7 +431,6 @@ watch(
           option-value="label"
           lazy-rules="ondemand"
           class="col-md-6 col-12"
-          v-model="trainingPlace"
           id="select-trainig-place"
           :dense="dense"
           :readonly="readonly"
@@ -419,6 +438,11 @@ watch(
           :label="$t('formDialogInputTrainingPlace')"
           :options="trainingPlaceOptions"
           @filter="trainingPlaceFilter"
+          :model-value="readonly ? trainingPlace || '-' : trainingPlace"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (trainingPlace = v) : '')
+          "
+          @clear="trainingPlace = ''"
         >
           <template v-slot:no-option>
             <q-item>
@@ -436,7 +460,11 @@ watch(
           :readonly="readonly"
           :label="$t('formDialogInputCheckpoint')"
           class="col-6"
-          v-model="checkpoint"
+          :model-value="readonly ? checkpoint || '-' : checkpoint"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (checkpoint = v) : '')
+          "
+          @clear="checkpoint = ''"
         />
         <q-input
           lazy-rules="ondemand"
@@ -446,7 +474,11 @@ watch(
           :readonly="readonly"
           :label="$t('formDialogInputCheckpoint') + ' ENG'"
           class="col-6"
-          v-model="checkpointEN"
+          :model-value="readonly ? checkpointEN || '-' : checkpointEN"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (checkpointEN = v) : '')
+          "
+          @clear="checkpointEN = ''"
         />
         <q-file
           ref="attachmentRef"
diff --git a/src/components/02_personnel-management/FormInformation.vue b/src/components/02_personnel-management/FormInformation.vue
index 1d83d5b1..6e063be4 100644
--- a/src/components/02_personnel-management/FormInformation.vue
+++ b/src/components/02_personnel-management/FormInformation.vue
@@ -128,7 +128,6 @@ onMounted(async () => {
         map-options
         hide-selected
         hide-bottom-space
-        v-model="brId"
         for="select-br-id"
         input-debounce="0"
         option-label="label"
@@ -141,6 +140,9 @@ onMounted(async () => {
         :label="$t('formDialogInputBrId')"
         :options="brOptions"
         @filter="brFilter"
+        :model-value="readonly ? brId || '-' : brId"
+        @update:model-value="(v) => (typeof v === 'string' ? (brId = v) : '')"
+        @clear="brId = ''"
       >
         <template v-slot:no-option>
           <q-item>
diff --git a/src/components/02_personnel-management/FormPerson.vue b/src/components/02_personnel-management/FormPerson.vue
index 64c9d073..4179a389 100644
--- a/src/components/02_personnel-management/FormPerson.vue
+++ b/src/components/02_personnel-management/FormPerson.vue
@@ -119,7 +119,6 @@ watch(
           map-options
           hide-selected
           hide-bottom-space
-          v-model="prefixName"
           input-debounce="0"
           option-label="label"
           option-value="value"
@@ -132,6 +131,11 @@ watch(
           :for="`${prefixId}-select-prefix-name`"
           :label="$t('formDialogInputPrefixName')"
           @filter="prefixNameFilter"
+          :model-value="readonly ? prefixName || '-' : prefixName"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (prefixName = v) : '')
+          "
+          @clear="prefixName = ''"
         >
           <template v-slot:no-option>
             <q-item>
@@ -166,7 +170,11 @@ watch(
           hide-bottom-space
           class="col-3"
           :label="$t('formDialogInputMidName')"
-          v-model="midName"
+          :model-value="readonly ? midName || '-' : midName"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (midName = v) : '')
+          "
+          @clear="midName = ''"
         />
 
         <q-input
@@ -196,7 +204,15 @@ watch(
           :disable="!readonly"
           class="col-1"
           :label="$t('formDialogInputPrefixName')"
-          :model-value="capitalize(prefixNameEn || '')"
+          :model-value="
+            readonly
+              ? capitalize(prefixNameEn || '') || '-'
+              : capitalize(prefixNameEn || '')
+          "
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (prefixName = v) : '')
+          "
+          @clear="prefixName = ''"
         />
 
         <q-input
@@ -223,7 +239,11 @@ watch(
           hide-bottom-space
           class="col-3"
           :label="$t('formDialogInputMidNameEN')"
-          v-model="midNameEn"
+          :model-value="readonly ? midNameEn || '-' : midNameEn"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (midNameEn = v) : '')
+          "
+          @clear="midNameEn = ''"
         />
         <q-input
           lazy-rules="ondemand"
@@ -250,8 +270,12 @@ watch(
         :readonly="readonly"
         class="col-3"
         :label="$t('formDialogInputTelephone')"
-        v-model="telephoneNo"
-        mask="##########"
+        :mask="readonly ? '' : '##########'"
+        :model-value="readonly ? telephoneNo || '-' : telephoneNo"
+        @update:model-value="
+          (v) => (typeof v === 'string' ? (telephoneNo = v) : '')
+        "
+        @clear="telephoneNo = ''"
       />
       <q-input
         lazy-rules="ondemand"
@@ -262,7 +286,9 @@ watch(
         :readonly="readonly"
         :label="$t('formDialogInputEmail')"
         class="col-3"
-        v-model="email"
+        :model-value="readonly ? email || '-' : email"
+        @update:model-value="(v) => (typeof v === 'string' ? (email = v) : '')"
+        @clear="email = ''"
       />
 
       <q-select
@@ -274,7 +300,6 @@ watch(
         map-options
         hide-selected
         hide-bottom-space
-        v-model="gender"
         input-debounce="0"
         option-label="label"
         option-value="value"
@@ -287,6 +312,9 @@ watch(
         :for="`${prefixId}-select-gender`"
         :label="$t('formDialogInputGender')"
         @filter="genderFilter"
+        :model-value="readonly ? gender || '-' : gender"
+        @update:model-value="(v) => (typeof v === 'string' ? (gender = v) : '')"
+        @clear="gender = ''"
       >
         <template v-slot:no-option>
           <q-item>