Google maps display markers after filters are applied

Hello guys. I am facing problem with display markers on map after filer is applied. Yes filter is on child component and filter value is passes to request. Yes i am getting response however no new markers are showed up

<script setup>
import {onMounted, ref} from 'vue';
import {Loader} from '@googlemaps/js-api-loader';
import Filters from "@/Pages/Explore/Filters.vue";

let props = defineProps([
  'companyTypes',
])
const mapContainer = ref(null);
const markers = [];
const markersAdded = ref(false);

const loader = new Loader({
  apiKey: '',
  version: 'weekly',
  libraries: ['places'],
});

const mapOptions = ref({
  center: {lat: 0, lng: 0},
  zoom: 12,
});

const filters = (f, map) => {
  filters.value = f;
  markersAdded.value = false;
  addMarkers(map);
};
let currentInfoWindow = null;
const fetchData = async () => {
  return await axios.get(route('explore.search'), {
    params: {
      coordinates: mapOptions.value.center,
      type: filters.value,
    },
  });
};

const initMap = () => {
  loader.load().then(() => {
    const map = new google.maps.Map(mapContainer.value, mapOptions.value);

    map.addListener('dragend', () => {
      const center = map.getCenter();
      mapOptions.value.center = {lat: center.lat(), lng: center.lng()};
      localStorage.center = JSON.stringify(mapOptions.value.center);
      markersAdded.value = false;
      addMarkers(map);
    });
    if (!markersAdded.value) {
      addMarkers(map);
    }
    filters(filters.value, map);
  });
};
const addMarkers = (map) => {
  deleteMarkers();
  fetchData().then((response) => {
    deleteMarkers();

    response.data.data.forEach((markerData) => {
      const marker = new google.maps.Marker({
        position: {
          lat: parseFloat(markerData.lat),
          lng: parseFloat(markerData.lng),
        },
        map,
        title: markerData.company_name,
        icon: {
          url: '/assets/map/map-marker.png',
        },
      });
      const infoWindow = new google.maps.InfoWindow({
        content: `<div class="card p-2">
    <div class="card-body">
    <div class="d-flex justify-content-between">
    <div class="d-flex align-items-center">
    <img src="${markerData.image}" alt="logo" class="img-fluid me-3" style="width: 50px; height: 50px;">
    <div>

    <h5 class="card-title">${markerData.company_name}</h5>
    <p class="card-text">${markerData.address}</p>
    <p class="card-footer">${markerData.is_featured}</p>
</div>
</div>`,
      });

      marker.addListener('click', () => {
        if (currentInfoWindow) {
          currentInfoWindow.close();
        }
        infoWindow.open(map, marker);
        currentInfoWindow = infoWindow;
      });
      markers.push(marker);
    });
  });
};
const deleteMarkers = () => {
  markers.forEach((marker) => {
    marker.setMap(null);
  });

  markers.length = 0; // Clear the markers array
};
onMounted(() => {
  if (localStorage.center) {
    mapOptions.value.center = JSON.parse(localStorage.center);
  } else {
    navigator.geolocation.getCurrentPosition((position) => {
      mapOptions.value.center = {
        lat: position.coords.latitude,
        lng: position.coords.longitude,
      };
      localStorage.center = JSON.stringify(mapOptions.value.center);
    });
  }

  initMap();
});
</script>

and my code wich i am using.