Add lifecycle hook and fetch data on mounted

Add two-way binding for menitValue in InputWithSuffix
Add two-way binding for timeValue in InputNumber
Refactor filterData function in Table_5.vue

src/components/Pages/Gangguan/Table_5.vue

@@ -1,5 +1,10 @@
 <template>
-    
+      <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type1 @update:filters="(value) => {
+                filters = value
+            }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed=""
@@ -46,7 +51,6 @@
         </DxDataGrid>
     </div>
 </template>
-
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
@@ -104,20 +108,15 @@ const { onResult, onError, loading, refetch } = useQuery(GET_SELESAI_TANPA_ID_PE
     idUid: 0,
     idUp3: 0,
 })
-
-const reportButton = useSearchStore()
-const detected = computed(() => reportButton.isTriggerChange)
-watch(detected, () => {
-    const dateValue = useDateStore().getDateValue().split(' s/d ');
-    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
-    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
-    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+const filterData = (data: any) => {
+    const {  posko, uid, up3 } = data;
+    const dateValue = data.periode.split(' s/d ')
     refetch({
-        dateFrom: dateValue[0].split('-').reverse().join('-'),
-        dateTo: dateValue[1].split('-').reverse().join('-'),
-        posko,
-        idUid: uid,
-        idUp3: up3
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
@@ -130,11 +129,6 @@ watch(detected, () => {
     onError(error => {
         console.log(error)
     })
-})
-onMounted(() => {
-    const filters = useFiltersStore()
-    filters.setConfig({
-        type: 'type-1',
-    })
-})
+}
+const filters = ref()
 </script>