Vue Child Component Not Displaying Dynamic Data On First Page Load

Given the code below, my child component alerts trigger before any of the code in the Parent mounted function. As a result it appears the child has already finished initialization

Solution 1:

If you are new to Vue, I really recommend reading the entire documentation of it and the tools you are using - vue-class-component (which is Vue plugin adding API for declaring Vue components as classes)

1. Caveats of Class Component - Always use lifecycle hooks instead of constructor

So instead of using constructor() you should move your code to created() lifecycle hook

This should be enough to fix your code in this case BUT only because the usage of the Notes component is guarded by v-if="notes.length" in the Parent - the component will get created only after notes is not empty array

This is not enough in many cases!

2. created() lifecycle hook (and data() function/hook) is executed only once for each component. The code inside is one time initialization. So when/if parent component changes the content of notesArr prop (sometimes in the future), the eventChanges will not get updated. Even if you know that parent will never update the prop, note that for performance reasons Vue tend to reuse existing component instances when possible when rendering lists with v-for or switching between components of the same type with v-if/v-else - instead of destroying existing and creating new components, Vue just updates the props. App suddenly looks broken for no reason...

This is a mistake many unexperienced users do. You can find many questions here on SO like "my component is not reactive" or "how to force my component re-render" with many answers suggesting using :key hack or using a watcher ....which sometimes work but is almost always much more complicated then the right solution

Right solution is to write your components (if you can - sometimes it is not possible) as pure components (article is for React but the principles still apply). Very important tool for achieving this in Vue are computed propeties

So instead of introducing eventChanges data property (which might or might not be reactive - this is not clear from your code), you should make it computed property which is using notesArr prop directly:

get eventChanges() {
   return this.notesArr.map(note => {
     return {
       eventInfo: {
         name: note.name,
         group: note.groupNo || null,
         date: note.displayDate,
       },     
       note: note.noteToPresenter
     }
   })
}

Now whenever notesArr prop is changed by the parent, eventChanges is updated and the component will re-render

Notes:

• You are overusing async. Your getNotes function does not execute any asynchronous code so just remove it.
• also do not mix async and then - it is confusing

Either:

const promisesArray = [this.loadPrivate(),this.loadPublic()]
await Promise.all(promisesArray)
await this.checkAttendanceForPreviousTwoWeeks()
const results = await this.getCurrentParticipants()
this.currentP = results
this.notesArr = this.notes

or:

const promisesArray = [this.loadPrivate(),this.loadPublic()]
Promise.all(promisesArray)
  .then(() => this.checkAttendanceForPreviousTwoWeeks())
  .then(() => this.getCurrentParticipants())
  .then((results) => {     
    this.currentP = results
    this.notesArr = this.notes
  })

Great learning resource