How to use the mapbox-gl/dist/mapbox-gl.Map function in mapbox-gl

mounted() {
    this.$nextTick(function() {
      window.addEventListener('resize', this.getWindowHeight);
      //Init
      this.getWindowHeight()
    })


    vm = this
    mapboxgl.accessToken =
      'pk.eyJ1Ijoic29ub2pvcmVsIiwiYSI6ImNqaDl1Z25udzAybGMzNnBmbzl4NDBsam0ifQ.itgTNw7IhsoPTwkxiPz7Vw';
    map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/sonojorel/cjhw8422i15g72snx2zsof3s1',
      center: [-130.915, 9.15],
      zoom: 2
    })

    map.on('load', function() {
      vm.loadQuakes()
    })

    //** show current map center lat lng on page **//
    map.on('moveend', function(e) {
      vm.latitude = map.getCenter().lat
      vm.longitude = map.getCenter().lng
      // console.log (map.getCenter())
    })

draw(domElement: HTMLDivElement, paint: PaintMap) {
    const defaultOpts = {...this.state.viewport, style: this.state.mapStyle, container: domElement};
    const opts: MapBoxOptions = !this._isOnMobile ?
      {...defaultOpts, maxBounds: this.state.viewport.bounds} : defaultOpts;
    this._map = new mapboxgl.Map(opts);
    this._nav = new mapboxgl.NavigationControl();
    this._map.addControl(this._nav, 'top-right');
    this._map.on('load', () => {
      this._map.setPaintProperty('background', 'background-color', '#d3e0f4 ');
      this.colorMap(paint);
      this._map.dragRotate.disable();
      this._map.touchZoomRotate.disableRotation();
      this.zoomListener();
      this.dragListener();
      this.persistZoomAndCenterLevel();
      this.resize();
    });
  }
  render() {

componentDidMount() {
    const map = new mapboxgl.Map({
      container: this.mapContainer,
      style: 'mapbox://styles/mapbox/streets-v9',
      zoom: 18,
      center: [-74.50, 40],
    });

    map.addControl(new mapboxgl.NavigationControl());
    map.addControl(taskControl, 'top-left');

    map.once('load', () => {
      this.setState({ map })
      taskControl.update(this.props.currentTask);
    });
  }

mounted() {
    this.$nextTick(function() {
      window.addEventListener('resize', this.getWindowHeight);
      //Init
      this.getWindowHeight()
    })

    vm = this
    mapboxgl.accessToken =
      'pk.eyJ1Ijoic29ub2pvcmVsIiwiYSI6ImNqaDl1Z25udzAybGMzNnBmbzl4NDBsam0ifQ.itgTNw7IhsoPTwkxiPz7Vw';
    map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/sonojorel/cjhw8422i15g72snx2zsof3s1',
      center: [-79.995888, 40.440624],
      zoom: 2
    })

    map.on('load', () => { 
      vm.loadWeather()
    })

    //** show current map center lat lng on page **//
    map.on('moveend', (e) => {
      vm.latitude = map.getCenter().lat
      vm.longitude = map.getCenter().lng
    })

mounted() {
    this.$nextTick(function() {
      window.addEventListener('resize', this.getWindowHeight);
      //Init
      this.getWindowHeight()
    })


    vm = this
    mapboxgl.accessToken =
      'pk.eyJ1Ijoic29ub2pvcmVsIiwiYSI6ImNqaDl1Z25udzAybGMzNnBmbzl4NDBsam0ifQ.itgTNw7IhsoPTwkxiPz7Vw';
    map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/sonojorel/cjhw8422i15g72snx2zsof3s1',
      center: [-79.995888, 40.440624],
      zoom: 2
    })

    map.on('load', function() {
      vm.loadFlights()
    })

    //** show current map center lat lng on page **//
    map.on('moveend', function(e) {
      vm.latitude = map.getCenter().lat
      vm.longitude = map.getCenter().lng
    })