I tried to create simple text search, but I couldn't execute it. first I got all user data whom provide services and store it inside searchable array, then I tried to to filter it based on user entry. here you can see my code:

<template>
  <div class="text-h4 text-grey-9">
    <q-input
      outlined
      filled
      type="text"
      v-model="searchResult"
      color="amber-10"
      placeholder="search for service providers"
    />
  </div>
</template>
<script>
import { ref } from "vue";
import { db } from "src/boot/firebase";
import { collection, query, where, getDocs } from "firebase/firestore";

export default {
  setup() {
    return {
      searchableDate: ref([]),
      searchResult: '',
    };
  },
  async created() {
    const q = query(
      collection(db, "userProfile"),
      where("provider", "==", true)
    );
    const serviceProviderSnapshot = await getDocs(q);
    serviceProviderSnapshot.forEach(doc => {
      let docData = doc.data();
      this.searchableDate.unshift(docData);
    });
    console.log(typeof(this.searchableDate))
  },

  computed:{
    searchServiceProvider(){
      let searchResult = []
      if(this.searchResult !== 0){
        searchResult = this.searchableDate.filter(p =>
        p.fullName.toLowerCase().includes(this.searchResult.toLowerCase()) ||
        p.skillCatgs.toLowerCase().includes(this.searchResult.toLowerCase()))
      } else {
        searchResult = this.searchableDate
      }
    }
  }
};
</script>

here is the searchableData format:{0: {…}, 1: {…}, 2: {…}, 3: {…}}