PrimeVue dropdown with search filters' value reset issue

So I have been working on a project management tool's dashboard overview, where users can filter projects, statuses, due dates, etc. As the project list is a bit larger, I decided to add a filter in the primevue dropdown following the documentation of primevue v3. In the filtering section, I have added a 'reset' button to clear out the filters. However, I cannot clear the input given in the dropdown filter of Select Project(the first dropdown). By the reset function, I can only clear the v-model values. I need to clear the filter option too. Primevue v3 Dropdown Filter

I have tried refs to catch the dropdown and remove the input value using the handleReset function, I also tried the default primevue pkg classname of the filter finding from the browser console but these didn't work.

<script setup\>

const selectedProject = ref();
const statuses = ref();

const filterStatus = ref();
const filterDueDate = ref();
const isCalendarSelected = ref(false);

watch(selectedProject, (newVal) => {
  statuses.value = [{ name: 'All', id: '' }, ...(selectedProject.value?.statuses?.map((status) =\> ({ name: status.name, id: status.id })) || [])];
});

const selectedStatus = ref();

const projectId = ref();
const sta = ref();
const enD = ref();

const filterTasks = async () => {
  projectId.value = selectedProject.value ? selectedProject.value.id : '';
  sta.value = selectedStatus.value ? selectedStatus.value.id : '';
  enD.value = filterDueDate.value;
  fetchTasks(projectId.value, sta.value, enD.value);
};

const selectFilterDate = (newDate) => {
  isCalendarSelected.value = true;
  const date = new Date(newDate);
  filterDueDate.value = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
  filterTasks();
};

const handleDateDelete = () => {
  isCalendarSelected.value = false;
  filterDueDate.value = '';
  enD.value = '';
  filterTasks();
};

const handleFilterReset = () => {
  if(selectedProject.value || filterStatus.value || 
  filterDueDate.value) {
  selectedProject.value = '';
  filterStatus.value = '';
  filterDueDate.value = '';
  projectId.value = '';
  sta.value = '';
  selectedStatus.value = '';
  isCalendarSelected.value = false;
  filterTasks();
  }else{
  return;
 }
};
</script>

<template>
 <div class="flex gap-2 align-items-center flex-wrap" style="padding: 10px;">
  <h5 class="mb-2">Tasks</h5>
  <!-- Filter -->
  <div class="flex gap-2 flex-wrap justify-content-end filter-container">
   <Dropdown @change="filterTasks()" filter filterPlaceholder="Search Projects" v-model="selectedProject" :options="totalProjects" optionLabel="name" placeholder="Select Project" class="w-full md:w-12rem mb-2" />
   <Dropdown @change="filterTasks()" v-model="selectedStatus" :options="statuses" :disabled="!selectedProject" optionLabel="name" placeholder="Select Status" class="w-full md:w-12rem mb-2" />
   <div class="mb-2 relative w-full md:w-12rem">
    <Calendar @date-select="selectFilterDate($event)" showClear vmodel="filterDueDate" placeholder="Select Date" class="w-full md:w-12rem" />
     <p v-if="isCalendarSelected" @click="handleDateDelete" class="pi pi-times end-cross absolute cursor-pointer"></p>
   </div>
   <Button @click="handleFilterReset" label="Reset" class="mb-2" severity="secondary" />
  </div>
 </div>
</template>

Output Sample

Code