filter

src/components/TextFilter.vue

@@ -1,15 +1,29 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
-const text = ref<string | null>(null)
+interface Props {
+  modelValue?: string | null
+}
+
+const props = withDefaults(defineProps<Props>(), { modelValue: null })
+const emit = defineEmits<{ 'update:modelValue': [value: string | null] }>()
+
+const text = ref(props.modelValue)
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    text.value = value
+  },
+)
 
 function onSearch() {
-  console.log('onSearch', text.value)
+  emit('update:modelValue', text.value || null)
 }
 
 function onClear() {
-  text.value = ''
-  console.log('onClear', text.value)
+  text.value = null
+  emit('update:modelValue', null)
 }
 </script>