changes

app/components/datepicker/Datepicker.vue

@@ -1,45 +1,3 @@
-<template>
-  <div
-    class="control has-icons-left"
-    ref="datepickerRoot"
-  >
-    <div :class="['dropdown w-full', pos, focused && 'is-active']">
-      <div class="dropdown-trigger w-full">
-        <input
-          :disabled="disabled"
-          :class="['input', error && 'is-danger', disabled && 'has-text-dark']"
-          type="text"
-          placeholder="DD/MM/YYYY"
-          maxlength="10"
-          @focus="setFocus"
-          @blur="lostFocus"
-          @keyup.enter="pressEnter"
-          @keyup="checkDate"
-          v-model="show"
-        />
-      </div>
-      <div
-        class="dropdown-menu"
-        role="menu"
-        @click="doClick()"
-      >
-        <div class="dropdown-content px-2 w-xs">
-          <PickDay
-            v-bind="{ date, mindate, maxdate }"
-            @date="selectDate"
-          />
-        </div>
-      </div>
-    </div>
-    <span class="icon is-left">
-      <Icon
-        name="material-symbols:calendar-today-outline-rounded"
-        :size="21"
-        :class="focused ? 'has-text-primary' : 'has-text-grey'"
-      />
-    </span>
-  </div>
-</template>
 <script setup>
 import PickDay from "~/components/datepicker/PickDay.vue";
 
@@ -61,25 +19,20 @@ const error = ref(false);
 const focused = ref(false);
 const count1 = ref(0);
 const count2 = ref(0);
-const pos = ref();
 const datepickerRoot = useTemplateRef("datepickerRoot");
 
-function getPos() {
+const pos = computed(() => {
   switch (props.position) {
     case "is-top-left":
-      pos.value = "is-up is-left";
-      break;
+      return "is-up is-left";
     case "is-top-right":
-      pos.value = "is-up is-right";
-      break;
+      return "is-up is-right";
     case "is-bottom-left":
-      pos.value = "is-left";
-      break;
+      return "is-left";
     case "is-bottom-right":
-      pos.value = "is-right";
-      break;
+      return "is-right";
   }
-}
+});
 
 function initializeDate() {
   if (props.record) {
@@ -153,15 +106,56 @@ function checkDate() {
   } else error.value = true;
 }
 
-onMounted(() => {
-  getPos();
-  initializeDate();
-});
-
 watch(
   () => props.record,
   () => {
     initializeDate();
   },
+  {
+    immediate: true,
+  },
 );
 </script>
+
+<template>
+  <div
+    class="control has-icons-left"
+    ref="datepickerRoot"
+  >
+    <div :class="['dropdown w-full', pos, focused && 'is-active']">
+      <div class="dropdown-trigger w-full">
+        <input
+          :disabled="disabled"
+          :class="['input', error && 'is-danger', disabled && 'has-text-dark']"
+          type="text"
+          placeholder="DD/MM/YYYY"
+          maxlength="10"
+          @focus="setFocus"
+          @blur="lostFocus"
+          @keyup.enter="pressEnter"
+          @keyup="checkDate"
+          v-model="show"
+        />
+      </div>
+      <div
+        class="dropdown-menu"
+        role="menu"
+        @click="doClick()"
+      >
+        <div class="dropdown-content px-2 w-xs">
+          <PickDay
+            v-bind="{ date, mindate, maxdate }"
+            @date="selectDate"
+          />
+        </div>
+      </div>
+    </div>
+    <span class="icon is-left">
+      <Icon
+        name="material-symbols:calendar-today-outline-rounded"
+        :size="21"
+        :class="focused ? 'has-text-primary' : 'has-text-grey'"
+      />
+    </span>
+  </div>
+</template>