Remove AdvancedMarkerView Google Mapsv3 Vue3

Question

Want to clear AdvancedMarkerView in Google Maps API v3 and using Vue3. Getting a difficult to parse error when using the method described here:

Uncaught TypeError: 'get' on proxy: property '__e3_' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '#<Object>' but got '#<Object>')

My markers are stored in a pinia store. Here is how I'm trying to remove them:

  MapItemStore.mapMarkers.forEach((marker, index) =>
    // console.log(marker.map)
    // loggin the `marker.map` works and returns values. SEE SCREENSHOT BELOW

    marker.map = null  // returns the error message above
  )
  MapItemStore.mapMarkers = []
  .. other stuff

marker.map seems to exist so I'm not sure why setting it to null as recommended doesn't work. Here's what is returned when logging marker.map:

How can I remove these AdvancedMarkerView's in Vue3?

Answer 1

The issue is that Vue 3 uses proxies on all of it's objects. To fix this you need to use the toRaw() function to get the raw object from the proxy. Then manipulate it.

import { toRaw } from "vue";
...

MapItemStore.mapMarkers.forEach((marker, index) =>
    toRaw(marker).map = null;
);