How to use custom controls? about vuelayers HOT 11 CLOSED

<template>
  <div>
    <vl-map ref="map" :load-tiles-while-animating="true" :load-tiles-while-interacting="true">
      <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>

      <vl-layer-tile id="osm">
        <vl-source-osm></vl-source-osm>
      </vl-layer-tile>
    </vl-map>
  </div>
</template>

<script>
  export default {
    data () {
      return { 
        zoom: 2,
        center: [0, 0],
        rotation: 0,
      }
    },
    mounted () {
      // get vl-map by ref="map" and await ol.Map creation
      this.$refs.map.$createPromise.then(() => {
        this.$refs.map.$map.addControl(new ol.control.Sidebar({ element: 'sidebar', position: 'right' }))
        ...
      })
    },
  }
</script>

$ unzip ~/Downloads/LiveMap.zip 
Archive:  /home/ghetto/Downloads/LiveMap.zip
  End-of-central-directory signature not found.  Either this file is not
  a zipfile, or it constitutes one disk of a multi-part archive.  In the
  latter case the central directory and zipfile comment will be found on
  the last disk(s) of this archive.

<vl-map ref="map" :load-tiles-while-animating="true" :load-tiles-while-interacting="true" data-projection="EPSG:4326">
....
</vl-map>

var sidebar = this.$refs.map.$map.addControl(new ol.control.Sidebar({ element: 'sidebar', position: 'right' }));

import EventList from '@/components/List/EventList'
import {findPointOnSurface, createStyle, loadingBBox} from 'vuelayers/lib/_esm/ol-ext'
// import from ol package
import ScaleLine from 'ol/control/scaleline'

  export default {
    components: {
      EventList: EventList
    },
    mounted(){
      // get vl-map by ref="map" and await ol.Map creation
      this.$refs.map.$createPromise.then(() => {
        this.$refs.map.$map.addControl(new ScaleLine());
      })
    },
    data () {
      return {
        //controls: sidebar,
        zoom: 11,
        center: [6.15105, 49.60826],
        loadTilesWhileInteracting: true,
        clickCoordinate: undefined,
        selectedFeatures: [],
        baseLayers: [
          {
            name: 'osm',
            title: 'OpenStreetMap',
            visible: true,
          },
          {
            name: 'bing-maps',
            title: 'Bing Maps',
            apiKey: 'ArbsA9NX-AZmebC6VyXAnDqjXk6mo2wGCmeYM8EwyDaxKfQhUYyk0jtx6hX5fpMn',
            imagerySet: 'AerialWithLabels',
            visible: false,
          },
        ],
      }
    },
    methods: {
      //
    },
    layout: 'openlayers'
  }