Leaflet with Nuxt, marker does not stay where it should when zooming map, but only after updating marker

I have Nuxt app with Leaflet. I use custom div marker with leaflet. When I create this marker for the first time, everything is fine. But when I update the marker, in reality, delete and create new one. When dragging when map, marker is fine, when I “zoom” the map, the marker does not stay where it should, but is fixed to the “screen” position, instead to the geographical position. Can anyone at least direct me to the solution?

Adding marker:

addMarkerToMap(markerData: MyMarker) {
const myCustomColour = markerData.state?.color ?? "black";
let markerHtmlStyles = `
    background-color: ${myCustomColour};
    width: 2rem;
    height: 2rem;
    display: block;
    left: -1rem;
    top: -1rem;
    position: relative;
    border-radius: 3rem 3rem 0;
    transform: rotate(45deg);`;

const colorIcon = L.divIcon({
    iconAnchor: [0, 24],
    popupAnchor: [0, -36],
    html: `<span id="${markerData.id}" style="${markerHtmlStyles}"></span>`,
});
const marker = L.marker([markerData.lat, markerData.lng], {
    draggable: false,
    title: markerData.state?.title ?? "Unknown state",
    alt: markerData.state?.title ?? "Unknown state",
    icon: colorIcon,
});
marker.addTo(this.map);
return marker;
}

How I update the marker:

for (let i = 0; i < this.project!.markers.length; i++) {
    if (this.project!.markers[i].mapMarker) {
        await this.project!.markers[i].mapMarker.remove();
        this.project!.markers[i].mapMarker = null;
    }
    await this.$nextTick(); // Don't know if this has any effect with leaflet, but I've tried everything
    this.project!.markers[i].mapMarker = this.addMarkerToMap(
        this.project!.markers[i]
    );
}