How to search for profiles in firestore using vue - vue.js

Question

I'm Trying to be able to search for specific profiles in a database but I don't know how to get what I put into the input field to return the profiles close to what has been typed in heres what I have so Far hopefully it will make more sense.
<script>
import { ref } from 'vue'
import getPremium from "../Composables/getPremium.js";
import getStandard from "../Composables/getStandard.js";
import getBasic from "../Composables/getBasic.js";
import { computed } from 'vue'
import getCollection from '../Composables/getCollection';
const {Premium} = getPremium();
const selectedProfile = ref(Premium)
const query = ref('')
const filteredPeople = computed(() =>
query.value === ''
? Premium
: Premium.filter((person) => {
return person.toLowerCase().includes(query.value.toLowerCase())
})
)
export default {
setup() {
const { documents: Premium } = getCollection(
'Premium',
['name', '==', selectedProfile.value]
)
return { Premium, selectedProfile }
}
}
</script>
<template>
<p>home comoonent</p>
<form>
<div class="inline-block">
<Input v-model="selectedProfile" #change="query = $event.target.value" placeholder=" Search Escort Name" class="h-7 bg-neutral-700 text-neutral-400 m-4 inline-flex rounded"/>
{{ person }}
</div>
</form>
<p>Escorts</p>
<div class="grid gap-x-4 grid-cols-2 grid-rows-fit mx-5 md:grid md:gap-2 md:grid-cols-4 md:grid-rows-fit md:mx-20 lg:grid lg:gap-4 lg:grid-cols-4 lg:grid-rows-fit lg:mx-20 xl:grid xl:gap-4 xl:grid-cols-4 xl:grid-rows-fit xl:mx-20 2xl:grid 2xl:gap-4 2xl:grid-cols-4 2xl:grid-rows-fit 2xl:mx-20">
<div v-for =" Premiums in Premium" :key="Premiums.id" >
<router-link :to="{ name: 'Samplepremium', params: { id: Premiums.id }}">
<div class= "hover:scale-105 transition ease-in-out duration-300 bg-neutral-800 hover:bg-neutral-900 active:bg-neutral-900 text-neutral-400 font-bold rounded-xl">
<br>
<p>{{ Premiums.name }}</p>
<img :src= "Premiums.Pic1" class="object-contain ml-6 w-60 h-80 transition ease-in-out duration-300">
<div class="grid grid-cols-2 grid-rows-fit text-left ml-6">
<p>name:</p>
<p>{{ Premiums.name }}</p>
</div><br>
</div>
</router-link>
</div>
So I realise that if I have the name == selectedProfile it wont get any close searchs only a specific profile names I'm just unsure how I can combine the filteredPeople into the query and how to stop the page from reloading and deleting whats in the input field every time I try and enter a search.
I hope what I've shown makes some sense and that someone might have any ideas on how to do this any help what be greatly appreciated thanks.