Bars and Labels not appearing on first load.

[hamsterbaitor]

Hello,

I have created a very simple gantt chart, and this library seems to show some great promise.

I am creating an application using the Vuetify.js framework, and I can insert the Gantt chart component well enough. For some reason on load, the axes render correctly, but none of the bars themselves actually render.

If I right click on the page, and select Inspect (Using Chrome 98.0.4758.80) the developer tools pop up and suddenly the missing bars and labels render!

There's some feedback in the console which isn't particularly intuitive:

Am I missing something obvious...?

html code for the component:

<g-gantt-chart :chart-start="myChartStart" :chart-end="myChartEnd">
    <g-gantt-row
         v-for="row in rows"
         :key="row.label"
         :label="row.label"
         :bars="row.bars"
         bar-start="myStart"
         bar-end="myEnd"
    >
        <template #bar-label="{bar}">
            <span>{{bar.label}}</span>
        </template>
    </g-gantt-row>
</g-gantt-chart>

And the script:

import { GGanttChart, GGanttRow } from 'vue-ganttastic'
...
data () {
    return {
      myChartStart: '2022-02-16 09:00',
      myChartEnd: '2022-02-18 18:00',
      rows: [
        {
          label: 'Eloise',
          bars: [
            {
              myStart: '2022-02-16 09:00',
              myEnd: '2022-02-16 14:37',
              label: 'R#5566',
              ganttBarConfig: { color: 'white', backgroundColor: '#404040', opacity: 0.5, immobile: true }
            }
          ]

        },
        {
          label: 'John',
          bars: [
            {
              myStart: '2022-02-17 09:00',
              myEnd: '2022-02-17 18:00',
              label: 'R#6744',
              ganttBarConfig: { color: 'white' }
            },
            {
              myStart: '2022-02-18 09:00',
              myEnd: '2022-02-18 14:15',
              label: 'R#6798',
              ganttBarConfig: { color: 'white', handles: true }
            }
          ]
        }
      ],
      ...

[hamsterbaitor]

I have an update - the Gantt Chart was originally contained within another element, a Vuetify Expansion Panel which was closed on page loading. When expanding the panel, this 'bug' occurs as it does not render the bars, only the axes. I have swapped the Gantt chart to be in an Expansion Panel which is expanded on load, and both the axes and the rows now render on load.