我需要一段vue3模糊查询的代码

当用户在输入框中输入关键词时，您可以使用Vue 3中的`watch`来监听输入框中的值，然后使用`filter`函数来过滤数据。以下是一个简单的示例代码：

<template>
  <div>
    <input v-model="keyword" type="text" placeholder="请输入关键词" />
    <ul>
      <li v-for="(item, index) in filteredData" :key="index">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const keyword = ref('');
    const data = [
      { name: '苹果' },
      { name: '香蕉' },
      { name: '橘子' },
      { name: '草莓' },
      { name: '西瓜' },
    ];

    const filteredData = ref(data);

    watch(keyword, (newVal, oldVal) => {
      if (newVal !== oldVal) {
        filteredData.value = data.filter((item) =>
          item.name.toLowerCase().includes(newVal.toLowerCase())
        );
      }
    });

    return {
      keyword,
      filteredData,
    };
  },
};
</script>

在上面的示例代码中，我们定义了一个`keyword`变量来存储输入框中的值，一个`data`数组来存储所有数据，一个`filteredData`变量来存储过滤后的数据。我们使用`watch`函数监听`keyword`变量的值，并使用`filter`函数过滤`data`数组，将过滤后的结果存储到`filteredData`变量中。最后，在模板中使用`v-for`指令渲染`filteredData`数组中的数据。