Update date picker in Form FiltersType components

src/components/DatePicker.vue

@@ -1,27 +1,40 @@
 <script setup lang="ts">
-import { useDateStore } from '@/stores/date';
-import { PhCalendarBlank } from '@phosphor-icons/vue';
+import { PhCalendarBlank } from '@phosphor-icons/vue'
 import { ref, watch } from 'vue'
+
 import VueTailwindDatepicker from 'vue-tailwind-datepicker'
+
 const dateValue = ref('')
 const formatter = ref({
   date: 'DD-MM-YYYY',
   month: 'MMMM'
 })
-watch(dateValue, (newValue) => {
-  useDateStore().setDateValue(newValue);
 
+const emit = defineEmits(['update:dateValue'])
+
+watch(dateValue, (newValue) => {
+  emit('update:dateValue', newValue)
 })
 </script>
 
 <template>
   <div class="flex">
-    <vue-tailwind-datepicker v-model="dateValue" :formatter="formatter" separator=" s/d " :shortcuts="false"
-      :auto-apply="false" as-single use-range v-slot="{ value, placeholder }">
+    <vue-tailwind-datepicker
+      v-model="dateValue"
+      :formatter="formatter"
+      separator=" s/d "
+      :shortcuts="false"
+      :auto-apply="false"
+      as-single
+      use-range
+      v-slot="{ value, placeholder }"
+    >
       <div class="flex">
         <div class="flex-1">
-          <button type="button"
-            class="w-full flex items-center justify-between px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0">
+          <button
+            type="button"
+            class="w-full flex items-center justify-between px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
+          >
             <span class="text-gray-900">
               {{ value || placeholder }}
             </span>
@@ -31,4 +44,4 @@ watch(dateValue, (newValue) => {
       </div>
     </vue-tailwind-datepicker>
   </div>
-</template>
+</template>