MapBox supercluster wrong cluster locations
When your page is loaded the following warning is displayed in the developer tools console:
This page appears to be missing CSS declarations for Mapbox GL JS, which may cause the map to display incorrectly. Please ensure your page includes mapbox-gl.css, as described in https://www.mapbox.com/mapbox-gl-js/api/.
And though the Mapbox GL JS API reference doesn't contain any instructions related to mapbox-gl.css, you can find its usage in the examples. Adding the following line to the <head> section of your page via developer tools eliminated various problems with positions (which, besides markers, are also manifested as missing map controls):
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.0/mapbox-gl.css' rel='stylesheet' />
Note that you may need to use another version to match the version of your mapbox-gl.js file.
This link here says you need an offset for your markers so they can stay centerd all the time, and going through your code quickly i think you need it here
this.clusters[feature.properties.cluster_id] = new mapboxgl.Marker($feature,{ offset: 25 } ).setLngLat(feature.geometry.coordinates).addTo(this.map);
and here
this.markers.push(new mapboxgl.Marker($feature, { offset: 25 }).setLngLat(feature.geometry.coordinates).addTo(this.map));