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/Form/InputNumber.vue

@@ -1,36 +1,44 @@
 <script setup lang="ts">
-  const props = defineProps({
-    placeholder: {
-        type: String,
-        default: "",
-    },
-    disabled: {
-        type: Boolean,
-        default: false,
-    },
-    readonly: {
-        type: Boolean,
-        default: false,
-    },
-    value: {
-        type: Number,
-        default: "",
-    },
-  })
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  value: {
+    type: Number,
+    default: ''
+  }
+})
+const emit = defineEmits(['update:timeValue'])
+const timeValue = ref(1)
+watch(timeValue, (newValue) => {
+  console.log('newValue', newValue)
+  emit('update:timeValue', newValue)
+})
+
 </script>
 
 <template>
   <div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
     <input
+      v-model="timeValue"
       autocomplete="off"
       type="number"
-      :value ="props.value"
       :placeholder="placeholder"
       :disabled="disabled"
       :readonly="readonly"
       inputmode="numeric"
       pattern="[0-9.]*"
-      
       oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
       onfocus="this.value = this.value.replace(/[^0-9.]/g, '')"
       class="w-full 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"