Groups does not display if originally empty

[justindra]

If we place an array of groups that is originally empty on mount/create, and then update the groups prop with a list of groups, the timeline is not updated to display those groups.

<template>
  <div class="timeline">
    <Timeline
      ref="timeline"
      :items="items"
      :groups="groups"
    ></Timeline>
 <button @click="addGroups()">Add Groups</button>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { Timeline } from 'vue2vis';
import 'vue2vis/dist/vue2vis.css';
import getTimelineOptions from './timeline-options';
import { DataItem, DataGroup } from 'vis';

@Component({
  components: {
    Timeline
  }
})
export default class ScheduleTimeline extends Vue {
  items: DataItem[] = [];
  groups: DataGroup[] = [];

  addGroups() {
    this.groups = [
      { id: 1, content: 'Group 1' },
      { id: 2, content: 'Group 2' }
    ]
  }
}
</script>

The current workaround is to just add an Unassigned or empty group.

...
export default class ScheduleTimeline extends Vue {
  items: DataItem[] = [];
  groups: DataGroup[] = [ { id: 0, content: 'unassigned' } ];
}

[notchris]

And to also hide the necessary unassigned group:
{ id: 0, content: 'unassigned', visible: false }