VueMapbox : Adding an image layer on the map

Question

I am having some trouble showing images on a Mapbox map. I have an (existing Vue2) project where I want to display png weather data fetched from a provider and place them on top of the map (example image provided at the end). In general I have managed to use simple GeoJson objects like lines,points and polygons however I can't figure out how to add an image layer. Can anyone provide a minimal working example that utilizes the VueMapbox API ?

An example image

<template>
  <MglMap
    ref="map"
    :accessToken="accessToken"
    :mapStyle="style"
    :maxZoom="10"
    :minZoom="2"
    @load="onMapLoaded"
  >
    <MglNavigationControl position="top-right" />
    <MglGeolocateControl position="top-right" />
    <MglGeojsonLayer
      :sourceId="imageSource.data.id"
      :source="imageSource"
      :layerId="imageLayer.id"
      :layer="imageLayer"
    />
  </MglMap>
</template>
    
  <script>
import ...
export default {
  name: "LayerMap",
  components: {
    MglMap,
    MglNavigationControl,
    MglGeolocateControl,
    MglGeojsonLayer,
  },
  data: function () {
    return {
      style: "mapbox://styles/mapbox/streets-v12",
      accessToken: "...",
      imageSource: {
        type: "geojson",
        data: {
          id: "minFuel",
          type: "FeatureCollection",
          features: [
            {
              id: "dummy",
              type: "image",
              url: "https://docs.mapbox.com/mapbox-gl-js/assets/radar.gif",
              coordinates: [
                [-80.425, 46.437],
                [-71.516, 46.437],
                [-71.516, 37.936],
                [-80.425, 37.936],
              ],
            },
          ],
        },
      },
      imageLayer: {
        id: "image",
        type: "symbol",
      },
      maplLoaded: false,
    };
  },

  created() {
    this.mapbox = Mapbox;
  },
  computed: {
    ...mapState(...),
    ...mapGetters(...),
  },
  methods: {
    onMapLoaded: async function (event) {
      this.flyTo = event.component.actions.flyTo;
      await this.flyTo({
        center: [50.0, 50.0],
        zoom: 2,
        speed: 8,
      });
    },
    async flyToCoodinates(coordinates) {
      await this.flyTo({
        center: coordinates,
        zoom: 3,
      });
    },
  },
};
</script>