I am trying to create a searching component using Vue 3 in cli i import data from json file and I have tried many functions but the search filter doesn't work so i need a search filter function

this is my code

    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())
      );
    },
  },
};

and this is the input and cards that i show in

    <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>