Estoy tratando de crear un componente de búsqueda usando Vue 3 en cli. Importo datos del archivo json y probé muchas funciones, pero el filtro de búsqueda no funciona, así que necesito una función de filtro de búsqueda.

este es mi codigo

 import data from "@/assets/data.json"; export default { name: "Home", data: function () { return { allData: data, search: "", }; }, components: { myComp, foooter, headeer }, computed: { filter() { return this.allData.filter((item) => item.body.toLowerCase().includes(this.search.toLowerCase()) ); }, }, };

y esta es la entrada y las tarjetas que muestro en

 <div class="row justify-content-md-center"> <div class="col-md-4"> <div class="form-group"> <input class="form-control" type="text" name="search" placeholder="search..." v-model="search" /> </div> </div> </div> <div class="row"> <my-comp v-for="item in filter" :key="item.id" :id="item.id" :imgsrc="item.imgsrc" :price="item.price" :city="item.city" :country="item.country" :reviewnum="item.reviewnum" :daynum="item.daynum" /> </div>