Scrollbar not showing up but the div is scrolling

[BorisAng]

We have the following template and the problem is that the b-list-group can be scrolled, however, the scrollbar is not being displayed. We use VuePerfectScrollbar in other components and there as the user scrolls up or down the bar is displayed.

<template>
  <b-list-group class="border rounded mb-4">
    <VuePerfectScrollbar
      class="scroll-area"
      :settings="settings">
        <bid-or-job
          v-for="(bid, index) in convertedBids"
          :key="bid.wf_ref"
          :item="bid"
          :class="{'last-row': index === convertedBids.length - 1}"/>
    </VuePerfectScrollbar>
  </b-list-group>
</template>

Here are the settings:

  data () {
    return {
      settings: {
        maxScrollbarLength: 400,
        minScrollbarLength: 150,
        wheelSpeed: 3,
        suppressScrollX: true,
        handlers: ['drag-thumb', 'wheel']
      }
    }
  }

convertedBids is a computed property which gets emptied and then refilled every time the data is changed.

The only way I can display the scrollbar is if I change either maxScrollbarLength or minScrollbarLength. However, the next time the user refreshes the page the bar disappears.

Any ideas why this could be happening would be greatly appreciated.