Laravel and Vue.js api controller problem

I'm trying to make filter using city and feature, so it something like get me the city that has x feature. I'm stuck in my Api Controller, I'm trying to use the request-> city and $request->feature in my controller like this:

$response= Hotel::where('city', $request->cat)->where('features_list', $request->feat)->get();

return response()->json($response);

using this controller code is not working and i'm not sure how to solve such a problem.

here is my vue.js code :

const app = new Vue({
    el: '#app',
    components: { App },
    mounted() {
      console.log('comp mounted.')
      this.getHotelFun();
      this.city();
      this.feature();
    },
    data: function() {
      return {
      cat:[],
      feat:[],
      hotels:[]
    }
  },
    watch:{
      cat(after, before){
        this.city()
      },      
      feat(after, before){
        this.feature()
      }
    },

  methods:{

    city(name){
    axios.get('http://localhost:8000/api/products?name=' + name,  {params:{cat:this.cat}})
    .then(res=> this.hotels = res.data)

  },    
  feature(feat){
    axios.get('http://localhost:8000/api/products?option=' + feat,  {params:{feat:this.feat}})
    .then(respond => this.hotels = respond.data)

  },
    
  getHotelFun(){
    let self = this;
    axios.get('../api/products').then(function(res){
        self.hotels = res.data;
    
    })
  },

},
});

my network error https://imgur.com/OrkGaMU ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ The expected behavior:

1 - When I select a city, all the hotels that is from the selected city should show up.

2- After selecting a city I need to select a feature to show all the hotels that in the selected city that has the selected feature.

Current behavior:

1 - When city is selected the hotels shows up correctly.

2- When Feature is selected the network throws status 500 and error with array to string conversion

https://imgur.com/H5wzkv1