How to pass computed data to child template on click?

Question

Vue.js

I have a product catalog and filtering with 2 buttons: "apply filters" and "reset filters". At the moment everything works, but only dynamically. I do the filtering, collect it in a computed property and pass it to the template.
<HotelsList v-bind:listData="filterHotels" />

data() {
    return {
      hotels: [{},{} и т.д.        },
      ],
  computed: {
    filterHotels() {
      return this.filteredByCountry(
        this.filteredByType(
          this.filteredByReviewsAmount(
            this.filteredByStars(this.filteredByPrice(this.hotels))
          )
        )
      )
    },
    priceOutput() {
      return this.price_range
    },
  },
methods: {
    isNumber(evt) {
      evt = evt ? evt : window.event
      var charCode = evt.which ? evt.which : evt.keyCode
      if (
        charCode > 31 &&
        (charCode < 48 || charCode > 57) &&
        charCode !== 46
      ) {
        evt.preventDefault()
      } else {
        return true
      }
    },
    filteredByType(hotels) {
      if (this.selected_types == null || this.selected_types.length == 0)
        return hotels
      return hotels.filter((h) => this.selected_types.includes(h.type))
    },
    filteredByCountry(hotels) {
      if (
        this.selected_countries == null ||
        this.selected_countries.length == 0
      )
        return hotels
      return hotels.filter((h) => this.selected_countries.includes(h.country))
    },
    filteredByReviewsAmount(hotels) {
      if (!this.reviews_amount) return hotels
      return hotels.filter((h) => this.reviews_amount <= h.reviews_amount)
    },
    filteredByStars(hotels) {
      if (!this.checked_stars.length) return hotels
      return hotels.filter((h) =>
        this.checked_stars.includes(h.stars.toString())
      )
    },
    filteredByPrice(hotels) {
      if (!this.price_range) return hotels
      return hotels.filter((h) => this.price_range >= h.min_price)
    },
    filtersReset() {
      this.selected_countries = null
      this.selected_types = null
      this.reviews_amount = ''
      this.checked_stars = []
      this.price_range = ''
    },
  },

I also need the filtering to work only on the click "apply filters". I tried to do like this:

<button type="button" @click="filtersApply(filterHotels)">

<HotelsList v-bind:listData="hotels" />
and added method

filtersApply(array) {
      this.hotels = array
    },

It seems like filtering by click has worked, but now reset does not work. And in general, the feeling that this is some kind of crutch. Tell me please.

Answer 1

data:
1) Все отели
2) Отели, который передаются в HotelsList
3) Фильтры

methods:
4) Метод, который применяет фильтры - заполняет (2) подходящими по фильтрам элементами из (1)
5) Метод, который сбрасывает значения фильтров и вызывает метод (4)