Marker placement issue with multiple custom icons

[ncomeaux]

I am running into an issue getting markers to be placed accurately on a map when using multiple custom icons. Placement is correct with no custom icon, but once custom icon is added in the marker slot the new markers are all incrementally further offset from the correct position (see video attachment for behavior).

Code that yields incorrect markers:

<MglMarker
  v-for="(item, index) in points"
  :key="item.id + index"
  :id="item.id + index"
  :coordinates="item.coordinates"
>
    <v-icon slot="marker" :color="makeColor(item.id)">circle</v-icon>
</MglMarker>

Current workaround involves simply wrapping the icon in a div and using that with the slot:

<div slot="marker">
  <v-icon :color="makeColor(item.id)">circle</v-icon>
</div>

I am raising the issue since using the icon in the slot is what is shown in the docs, so the simple fix would be to update the docs (assuming this is a recurring issue and not just a problem with my implementation).

Tech stack:
"node": "=15.10.0",
"npm": ">=7.0.0",
"vue": "^2.6.12",
"mapbox-gl": "^0.53.1",
"vue-mapbox": "^0.4.1",
"@mapbox/mapbox-gl-geocoder": "^4.7.1",
"@mapbox/mapbox-sdk": "^0.13.0",
"@nuxtjs/vuetify": "^1.11.3",

Custom.Marker.Animation.mp4