In Vue, when do child components render?

Question

I'm creating a calendar to track payments due. I have the following section of code to create the calendar grid. I am using Bootstrap-Vue:

<div v-for="week in 5">
  <b-row class="pb-2">
    <b-col class="px-2">
      <Day
        :day="first(week)"
        :today=days[(week - 1) * 7]
        :payments="payments"
      ></Day>
    </b-col>
    <b-col
      v-for="(day, index) in days.slice((week - 1) * 7 + 1, week * 7)"
      :key="index"
      class="pr-2 pl-0"
    >
      <Day
        :day="day"
        :today="today"
        :payments="payments"
      ></Day>
    </b-col>
  </b-row>
</div>

Day is a child component that renders the data and payments due for that day. The days prop is an array of moment.js variables. When I run this, no days are created for Sundays. I get the following error 5 times (one for each Sunday):

[Vue warn]: Error in render: "TypeError: Cannot read property 'date' of undefined"

If I change the assignment of the day prop for Sundays to:

:day="first(week)"

and then create a first method:

first(week) {
  return this.days[(week - 1) * 7];
},

the calendar will be created correctly (after the screen flashes a few times). However, I still get the aforementioned errors. Why?

Day has a child component, Date, which is responsible for displaying the day's date.

<div
  class="date"
  :id="id"
  :title="title"
>
  {{ day.date() }}
</div>

This is where the error is generated.

Answer 1

The child components are mounted before the parent, although I am not sure it will actually help you solve your issue.

Answer 2

I think you should't mount the child component before obj get date attr