fix: External update of modelValue not updating the input value (#20)

Author: Jasenkoo

src/Vue3DatePicker/Vue3DatePicker.vue

@@ -88,7 +88,7 @@
 </template>
 
 <script lang="ts" setup>
-    import { computed, DefineComponent, onMounted, onUnmounted, PropType, ref, useSlots } from 'vue';
+    import { computed, DefineComponent, onMounted, onUnmounted, PropType, ref, toRef, useSlots, watch } from 'vue';
 
     import DatepickerInput from './components/DatepickerInput.vue';
     import DatepickerMenu from './components/DatepickerMenu.vue';
@@ -176,6 +176,7 @@
     const slots = useSlots();
     const isOpen = ref(false);
     const valueCleared = ref(false);
+    const modelValue = toRef(props, 'modelValue');
 
     onMounted(() => {
         parseExternalModelValue(props.modelValue);
@@ -199,6 +200,10 @@
     const slotList = mapSlots(slots, 'all');
     const inputSlots = mapSlots(slots, 'input');
 
+    watch(modelValue, () => {
+        parseExternalModelValue(modelValue.value);
+    });
+
     const { openOnTop, menuPosition, setMenuPosition, recalculatePosition } = usePosition(props.position, props.uid);
 
     const { internalModelValue, inputValue, parseExternalModelValue, emitModelValue, checkBeforeEmit } =

src/Vue3DatePicker/utils/composition/external-internal-mapper.ts

@@ -73,6 +73,7 @@ export const useExternalInternalMapper = (
             formatInputValue();
         } else {
             internalModelValue.value = null;
+            inputValue.value = '';
         }
     };