Не выводятся элементы массива в диапазоне цен

const app = new Vue({
   el: '#app',
   data() {
      return {
         houses: [
           {id: 4308, garage: 2, price: 123123},
           {id: 123, garage: 3, price: 33},
           {id: 123, garage: 4, price: 123},
           {id: 123, garage: 2, price: 64},
           {id: 123, garage: 6, price: 213},
           {id: 123, garage: 3, price: 34},
           {id: 123, garage: 1, price: 5},
           {id: 4308, garage: 2, price: 123123},
           {id: 123, garage: 3, price: 33},
           {id: 123, garage: 4, price: 123},
           {id: 123, garage: 2, price: 64},
           {id: 123, garage: 6, price: 213},
           {id: 123, garage: 3, price: 34},
           {id: 123, garage: 1, price: 5},
           {id: 4308, garage: 2, price: 123123},
           {id: 123, garage: 3, price: 33},
           {id: 123, garage: 4, price: 123},
           {id: 123, garage: 2, price: 64},
           {id: 123, garage: 6, price: 213},
           {id: 123, garage: 3, price: 34},
           {id: 123, garage: 1, price: 5},
           {id: 4308, garage: 2, price: 123123},
           {id: 123, garage: 3, price: 33},
           {id: 123, garage: 4, price: 123},
           {id: 123, garage: 2, price: 64},
           {id: 123, garage: 6, price: 213},
           {id: 123, garage: 3, price: 34},
           {id: 123, garage: 1, price: 5},
         ],
         minPrice: 5,
         maxPrice: 1000,
      }
   },
   methods: {
      SetRangeSlider() {
         if (this.minPrice > this.maxPrice) {
            let temp = this.maxPrice;
            this.maxPrice = this.minPrice;
            this.minPrice = temp;
         }
         this.houses.filter(function(item) {
            return item.price >= this.minPrice && item.price <= this.maxPrice
         })
      },
   },

});

.table {
width: 1029px;
height: 420px;
border-radius: 24px;
overflow-y: scroll;
}
.row {
width: 984px;
height: get-vh(66px);
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
border-bottom: get-vh(1px) solid rgba(255, 255, 255, 0.2);
}
.row:nth-child(2n) {
background: rgba(0, 0, 0, 0.25);
}
.id {
width: get-vh(128px);
height: get-vh(64px);
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
font-size: 30px;
color: #FFFFFF;
}
.garage {
width: get-vh(128px);
height: get-vh(64px);
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
font-size: 30px;
color: #FFFFFF;
}
.price {
width: get-vh(128px);
height: get-vh(64px);
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
font-size: 30px;
color: #FFFFFF;
}
.range__slider {
   width: 418px;
   height: 10px;
   text-align: center;
   position: relative;
   margin-top: 68px;
}
.range__slider svg, .range__slider input[type=range] {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 418px;
}
input[type=range]::-webkit-slider-thumb {
   z-index: 2;
   position: relative;
   top: 2px;
   margin-top: -7px;
}
          
       

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div  class="table">
     <div class="row" v-for="house in houses">
       <div class="id">{{house.id}}</div>
       <div class="garage">Мест в гараже: {{house.garage}}</div>
       <div class="price">{{house.price}}</div>
     </div>         
</div>
<div class="range__slider">
       <input type="range" min="0" max="10000" step="10" v-model.number="minPrice" @change="SetRangeSlider()">
       <input type="range" min="0" max="10000" step="10" v-model.number="maxPrice" @change="SetRangeSlider()">
      </div>
      <p>Min: {{minPrice}}</p>
      <p>Max: {{maxPrice}}</p>
 </div>