[Vuejs]-How to keep track of an array change in Vue.js when the index is a dynamic value?

Try this:

async mounted(){
  await responseForWeeks
  await responseForBuses
responseForWeeks => {
      responseForWeeks.forEach(
        week => this.campaign.weeks.push(week);
      )
   }
// this is partial since it is what you provided
   responseForBuses => {
      responseForBuses.forEach(
         bus => this.campaign.buses.push(bus);
         // Here I also fill the busesMap to link each week to its bus index in the array of buses
         this.busesMap[bus.id] = this.campaign.buses.length - 1;
      )
   }
   }

Basically you want to make sure that before your component loads your data is in place. You can also create computed properties which will force re rendering if dependencies are changed and they are in the dom.

Actually, the problem was indeed in the HTML.
When trying to access the object keys, better use [] intead of a dot .

Final HTML result would be as follows:

<ul>
   <li 
      v-for="(busId, index) in week.oneWayBuses"
      :key="index"
      :item="busId"
   >
       <span v-if="campaign.buses[[busesMap[busId]]]">
          <strong>{{ campaign.buses[busesMap[busId]].busLabel }}</strong>
          leaves on the 
          <span>{{ campaign.buses[busesMap[busId]].oneWayDepartureDate.toDate() | formatDate }}</span>
       </span>
    </li>
</ul>

What was happening is that previously campaign.buses[busesMap.busId] did not exist, thus not rendering anything. Solved to campaign.buses[busesMap[busId]]. Also used claudators for the displayed moustache sintach.

Hope it helps someone else messing with Objects!