Problème d'affichage du multiple filtre

Bonjour, je travaille sur une application avec comme backend laravel et front Nuxt js, j'aimerai faire un multi filtres, grace a un request a la base de données j'ai des données des prestataires avec les differentes relations (categories, profile ...). j'aimerai pouvoir filter par category , par prestataires verified,par ville, par prix le plus bas et prices le plus eleves si possible fusionné les differents filtres au besoins.
voici mon code:

<template>
  <div class="container mx-auto">
    <div class="max-w-5xl mx-auto">
      <header class="flex justify-between my-8 p-3 sectionFilter">
        <div class="flex items-center space-x-2">
          <MjSelect v-model="selectedCategory" placeholder="Categories">
            <option value="All">Filtre par: categorie</option>
            <option v-for="prestataire in prestataires" :key="prestataire.id"
              :value=prestataire.category.id>{{ prestataire.category.name}}</option>
          </MjSelect>
          <MjSelect v-model="selectedCity" placeholder="Villes">
            <option value="All">Filtre par: Ville</option>
            <option v-for="prestataire in prestataires" :key="prestataire.id"
                    :value=prestataire.profile.id>{{ prestataire.profile.ville}}</option>
          </MjSelect>
        </div>
        <div class="flex items-center space-x-2">
          <div>
            <MjSelect v-model="selectedPrice" placeholder="Prix">
              <option value="All">Filtre par: prix</option>
              <option value="1">Plus bas</option>
              <option value="2">Plus elevé</option>
            </MjSelect>
          </div>
          <MjToggle v-model="verified">
            Verified
            <MjIcon class="text-green-800" name="award"/>
          </MjToggle>
        </div>
      </header>
      <div  class="app-wrapper flex flex-wrap -mx-4">
        <CardPrestataire  v-for="prestataire in filteredPrestataires" :key="prestataire.id"
                         :link="`/prestataires/${prestataire.slug}`"
                         :title=prestataire.name
                         :price=prestataire.price
                         :imageUrl=prestataire.photos
                         :category=prestataire.category.name
                         :description=prestataire.description.substring(0,90)
                         :ville=prestataire.profile.ville
                         :verified=prestataire.verified
                         :href="`/categories/${prestataire.category.slug}`"
                         :id="prestataire.id" :value="prestataire.id" v-model="liked"/>
      </div>
    </div>
  </div>
</template>

<script>
import CardPrestataire from "../../components/elements/CardPrestataire";
import ALink from "../../components/forms/ALink";
export default {
   name: "index",
  components: { ALink, CardPrestataire },
  data:() => ({
    loading: false,
    prestataires: [],
    category_id: '',
    selectedCity: 'All',
    selectedPrice: 'All',
    errors: [],
    liked: [],
    selectedCategory: 'All',
    type: '',
    verified: false,
  }),
  mounted() {
    this.getPrestataires();
    this.getPrestataireByQueryCategory()
  },
  computed: {
    filteredPrestataires: function (){
      if(this.selectedCategory == 'All'){
        return this.prestataires
      }
      else if(this.selectedCategory !== 'All'){
        return this.prestataires.filter((prestataire) => {
          return prestataire.category_id == this.selectedCategory
        })
      }
      else if(this.selectedCity !== 'All'){
        return this.prestataires.filter((prestataire) => {
          return prestataire.profile_id == this.selectedCity
        })
      }
      else if(this.verified){
        return this.prestataires.filter((prestataire) => {
          return prestataire.verified == 1
        })
      }
    },
  },
  methods: {
    async getCategories() {
      try {
        await this.$axios.get('/api/categories')
          .then((resp) => {
            this.categories = resp.data.data
          })
      }catch (err) {console.log(err)}
    },
    async getPrestataires(){ // request a la base de données
      this.loading = true;
      try {
        await this.$axios.get('/api/prestataires')
          .then((resp) => {
            this.prestataires = resp.data.data
          })
        return this.prestataires
      }catch (error){
        this.loading = false;
        console.log(error)
      }
    },
    sortByLowPrice: function() {
      if(this.selectedPrice === 1){
        return this.prestataires.sort(function(a,b) {
          return a.price - b.price ;
        })
      }
    },
    sortByHigherPrice: function() {
      return this.prestataires.sort(function(a,b) {
        return b.price - a.price ;
      })
    },

  }
}
</script>

<style scoped>

</style>

Ce que j'obtiens

j'ai que le filtre par category qui fonctionne le reste non, j'aimerai vraimn votre aime , merci!