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

以下是一个简单的 Vue 3 模糊查询的例子：

<template>
  <div>
    <input type="text" v-model="searchTerm" placeholder="Search...">
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
</template>

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

export default {
  data() {
    return {
      items: [
        { id: 1, title: 'Apple' },
        { id: 2, title: 'Banana' },
        { id: 3, title: 'Orange' },
        { id: 4, title: 'Grapes' },
        { id: 5, title: 'Mango' }
      ],
      searchTerm: ''
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.title.toLowerCase().includes(this.searchTerm.toLowerCase()));
    }
  }
}
</script>

上面的代码中，我们使用了 `ref` 和 `computed` 来创建响应式的数据和计算属性。`items` 数组存储了我们要查询的数据，`searchTerm` 存储了用户输入的查询关键字。

我们通过一个计算属性 `filteredItems` 来过滤出和查询关键字匹配的数据项，并在模板中使用 `v-for` 指令来渲染这些数据项。

在输入框中输入查询关键字时，`searchTerm` 的值会发生变化，从而触发 `filteredItems` 的重新计算，最终实现了模糊查询的功能。