setup (props) {
    return () => ([
      h('div', {
        class: props.store.scroll.vertical.barClass.value,
        style: [ props.barStyle, props.verticalBarStyle ],
        'aria-hidden': 'true',
        onMousedown: props.store.onVerticalMousedown
      }),

      h('div', {
        class: props.store.scroll.horizontal.barClass.value,
        style: [ props.barStyle, props.horizontalBarStyle ],
        'aria-hidden': 'true',
        onMousedown: props.store.onHorizontalMousedown
      }),

      withDirectives(
        h('div', {
          ref: props.store.scroll.vertical.ref,
          class: props.store.scroll.vertical.thumbClass.value,
          style: props.store.scroll.vertical.style.value,
          'aria-hidden': 'true'
        }),
        props.store.thumbVertDir
      ),

      withDirectives(
        h('div', {
          ref: props.store.scroll.horizontal.ref,
          class: props.store.scroll.horizontal.thumbClass.value,
          style: props.store.scroll.horizontal.style.value,
          'aria-hidden': 'true'
        }),
        props.store.thumbHorizDir
      )
    ])
  }
We are using a sub-component to avoid unnecessary re-renders
of the QScrollArea content when the scrollbars are interacted with.