In my Vue app I have some child components that previously worked, ie. their respective data loaded fine inside the parent component.

I initially achieved this by adding a key to my child component, a solution that I found online as the recommended way to update data of child components dynamically.The idea is that a component will update automatically any time the key changes.

<upcoming-events :key="rerenderWidgets"/>

I am incrementing the rerenderWidgets value like so. The child data should be ready after the Promises are finished. The following code runs in the method() lifecycle hook after checking if it is the first page load.

const promisesArray = [this.loadPrivate(),this.loadPublic()]
      await Promise.all(promisesArray).then(async() => {
        await this.getCurrentParticipants().then(async(results) => {
         this.currentParticipants = results
         this.rerenderWidgets += 1
    
     })
})

This worked for a while but the child components are no longer loading their data in the Parent until after the second page visit. The renderWidgets gets incremented but somehow the data is now not updated. I don't think I changed anything that could have broken it, but obviously something has.

The child component itself has functions which get data from a module whose data should be ready once the above Promises are done, so I am not sure why it no longer works.

I also tried using the following code in the updated() hook that as it is supposed to run after the page has fully rendered. I figured all of the data should be ready when this function is called. But it doesn't work and seems to invoke a loop that shows the alert repeatedly.

 updated() {
  this.$nextTick(function () {
   alert('rerender....')
   this.rerenderWidgets += 1
  })

If anyone can tell me what might be going wrong and how I might fix it I'd much appreciate the help. Thanks in advance!