Vue.js Leaflet : bounds change does not update correctly

Question

I am having a bounds update issue with Vue Leaflet.

How it works :

1. I am getting info from an API
2. I add markers to display on the map
3. I fit bounds to display markers and get the right zoom and position to see all markers

What I visually see :

1. Map display OK
2. Instant markers display on the map OK
3. Correct zoom and centering on markers NOT OK => it takes few seconds to happen, actually it happens during the next API call and bounds change

Here is my component code, you can find the bounds change in the refreshMap method (all the console.log give me what I'm supposed to have, the correct coordinates even in the first call with the display not updating) :

<template>
  <div class="flex-grow-1">
    <l-map
      :zoom="zoom" 
      :center="center" 
      :options="{ attributionControl: false }"
      :bounds="bounds"
      :max-bounds="maxBounds">
      <l-tile-layer
      v-for="tileProvider in tileProviders"
      :key="tileProvider.name"
      :name="tileProvider.name"
      :visible="tileProvider.visible"
      :url="tileProvider.url"
      layer-type="base"/>
      <l-control-layers position="topright"></l-control-layers>
      <l-layer-group
          v-for="bGroup in groupsBalises" 
          :key="bGroup.groupId" layer-type="overlay" :name="bGroup.groupName" :visible="true">
              <BaliseMarker
              v-for="balise in bGroup.balises" 
              :key="balise.baliseId"
              :id="balise.baliseId"
              :latitude="balise.lastLatitude" 
              :longitude="balise.lastLongitude" 
              />
      </l-layer-group>
    </l-map>
  </div>
</template>

<script>
import "leaflet/dist/leaflet.css";
import { LMap, LTileLayer, LControlLayers, LLayerGroup } from "@vue-leaflet/vue-leaflet";
import BaliseMarker from "./BaliseMarker.vue";
import BaliseService from '../../services/balise.service.js'
import FormatHelper from '../../helpers/format.helper.js'


export default {
  components: {
    LMap,
    LTileLayer,
    BaliseMarker,
    LControlLayers,
    LLayerGroup,
  },
  data() {
    return {
      url: 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}{r}.png',
      zoom: 7,
      center: [48.9571487, 2.1941876],
      followedBalise: null,
      bounds: [],
      maxBounds: [],
      timer: '',
      groupsBalises: null,
      tileProviders: [
        {
          name: 'Classique',
          visible: true,
          url: 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}{r}.png',
        },
        {
          name: 'Satellite',
          visible: false,
          url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
        },
      ],
    };
  },
  mounted() {
    this.refreshMap();
    this.timer = setInterval(this.refreshMap, 5000);
  },
  beforeUnmount () {
    this.cancelAutoUpdate();
  },
  updated() {
    console.log('its updated');
  },
  methods: {
    setBounds() {
      console.log(this.groupsBalises);
      this.groupsBalises.forEach((group) => {
        group.balises.forEach((bElem) => {
          if(bElem.baliseId == this.followedBalise) {
            this.maxBounds = [bElem.lastLatitude, bElem.lastLongitude];
          }
        });
      });
    },
    refreshMap() {
      BaliseService.getGroupBalisesLastStatus()
      .then(response => {
          this.groupsBalises = FormatHelper.groupsBalisesArrayFormat(response.data).filter(Array);
          console.log("bounds set");
          this.bounds = FormatHelper.getCoords(response.data);
          console.log(this.bounds);
      })
      .catch(e => {
          console.log(e);
      });
    },
    cancelAutoUpdate () {
      clearInterval(this.timer);
    }
  }
}
</script>

• I tried to forceUpdate() just after the this.bounds = FormatHelper.getCoords(response.data); in the refreshMap() method to make sure it was not some update issue making the update happening only after the second bounds change, it didn't work.

Does anyone see why the zoom and centering only happen after the second API call and data update ?

My possible guess : The only difference with the first call and the other ones is that the first one is launched from :

    this.refreshMap();
    this.timer = setInterval(this.refreshMap, 5000);
  },

when the next ones are launched every 5 seconds after the mounted() happened. Maybe the first call after mounted() is missing something to properly work, some elements which are not yet created ?

I don't think it's the case since the Markers are fully created and added to the Map during the first call, which would say that everything required in the Map is working fine even during the first call. But it's the only though I could find about this issue.