Как удалить маркеры Google Maps в API композиции Vue 3 (API JS Gmaps)

Я пытаюсь следовать документации карт Google Карты Google удаляют маркер, и я не могу удалить маркеры, как они говорят.

Я видел много сообщений об этом на различных сайтах, но безрезультатно. Карта открывается с уже размещенным маркером, и есть простая функция для удаления этого маркера. Когда я нажимаю кнопку, я не получаю ошибки, и маркер остается.

Мое единственное предположение заключается в том, что я неправильно обращаюсь к объекту маркера?

Использование Vue3, составного API, прямого API Google Maps JS, без дополнительных модулей

<script setup>
/* eslint-disable no-undef */
import { ref, onMounted, } from "vue";

import { Loader } from "@googlemaps/js-api-loader";

const GOOGLE_MAPS_API_KEY = import.meta.env.VITE_GAPI;

const loader = new Loader({ apiKey: GOOGLE_MAPS_API_KEY }); // load APIKEY

const mapDiv = ref(null); // define divref to populate the map

let map = ref(null); // map object

let markers = ref([]);


onMounted(async () => { //create map
  await loader.load();
  map.value = new google.maps.Map(mapDiv.value, {
    // center: currPos.value,
    center: { lat: 40, lng: -80 },
    zoom: 7,
  });

  const initialMarker = new google.maps.Marker({
    position: { lat: 40.785091, lng: -73.968285 },
    map: map.value,
    title: "PLEASE WORK SIR",
  });

  markers.value.push(initialMarker);
});

const removeMarker = () => {

  console.info('remove marker');
  
  for (var i = 0; i < markers.value.length; i++) {
    console.info('i', markers.value[i]);
    markers.value[i].setMap(null);
    markers.value = []
  }

};


</script>

<template>
  <div style = "overflow-y: hidden">
    <v-btn @click = "removeMarker">Delete all markers</v-btn>

    <div ref = "mapDiv" style = "width: 100%; height: 80vh"></div>
  </div>
</template>