Is it possible to store Google Maps object as an attribute in a Vue component?

My google maps is being initialized in mounted() and stored in map attribute:

mounted() {
  this.initMap();
},
methods: {
  async initMap() {
    const loader = new Loader({
      apiKey: settings.googlemaps,
      version: 'weekly',
    });

    try {
      await loader.load();
      const {Map} = await google.maps.importLibrary('maps');

      this.map = new Map(this.$refs.map, {
        center: {lat: 37.75768866503074, lng: -96.54510528125},
        zoom: 4,
        minZoom: 3,
        streetViewControl: false,
        mapTypeControl: false,
        mapId: settings.mapid,
      });
    } catch (error) {
      console.error('Error loading Google Maps API', error);
    }
  },
}

The markers content comes from an external API and is passed from the parent component:

watch: {
  places: {
    deep: true,
    handler() {
      this.initMarkers();
    },
  },
},

The problem is the markers is not being added to the map (I’m not applying the places loop yet):

async initMarkers() {
  try {
    const {AdvancedMarkerElement} =
      await google.maps.importLibrary('marker');

    new AdvancedMarkerElement({
      map: this.map,
      title: 'Marker title',
      position: {
        lat: 38.992534,
        lng: -122.745783,
      },
    });
  } catch (error) {
    console.error('Error loading marker library', error);
  }
},

Looks like AdvancedMarkerElement cannot read/access this.map correctly.