Mapbox Nuxt component

correct.vue

<template>
  <div id="map" class="map">
    <div class="button-bar">
      <button v-on:click="addMapLayer()">terrain</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MapBox',
  mounted () {
    this.createMap()
    document.querySelector('.mapboxgl-ctrl-geocoder input').focus()
  },
  computed: {
    location () {
      console.log(this.$store.state.location)
    }
  },
  methods: {
    createMap: () => {
      const mapboxgl = require('mapbox-gl/dist/mapbox-gl.js')
      const MapboxGeocoder = require('@mapbox/mapbox-gl-geocoder')

      mapboxgl.accessToken = 'pk.eyJ1IjoicGlucGFydGRldiIsImEiOiJjajBqOXh0anAwMDFkMzNwbW5qMzVuZGo0In0.ltvQzboVtprxfeFAVOw1GA'

      // init the map
      this.map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/pinpartdev/cj09ooc9g00a12sqpnkum9wcd',
        center: [4.7835, 52.3491],
        zoom: 6,
        pitch: 0,
        minZoom: 2,
        maxZoom: 20,
        attributionControl: false
      })

      this.map.addControl(new MapboxGeocoder({
        accessToken: '<your token>'
      }))
    }
  }
}
</script>

wrong.vue

<template>
  <div id="map" class="map">
    <div class="button-bar">
      <button v-on:click="addMapLayer()">terrain</button>
    </div>
  </div>
</template>

<script>
const mapboxgl = require('mapbox-gl/dist/mapbox-gl.js')
const MapboxGeocoder = require('@mapbox/mapbox-gl-geocoder')

export default {
  name: 'MapBox',
  mounted () {
    this.createMap()
    document.querySelector('.mapboxgl-ctrl-geocoder input').focus()
  },
  computed: {
    location () {
      console.log(this.$store.state.location)
    }
  },
  methods: {
    createMap: () => {
      mapboxgl.accessToken = '<your token>'

      // init the map
      this.map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/pinpartdev/cj09ooc9g00a12sqpnkum9wcd',
        center: [4.7835, 52.3491],
        zoom: 6,
        pitch: 0,
        minZoom: 2,
        maxZoom: 20,
        attributionControl: false
      })

      this.map.addControl(new MapboxGeocoder({
        accessToken: 'pk.eyJ1IjoicGlucGFydGRldiIsImEiOiJjajA5bzdsMDIwMDJoMnFzYm0yYWE1amM4In0.oA1sdI9qjUVCOFocnGUtJA'
      }))      
    }
  }
}
</script>

It doesn't work for me. I get
"Cannot set property 'map' of undefined"

I finally opted to use leaflet + mapbox

It doesn't work for me. I get
"Cannot set property 'map' of undefined"

I finally opted to use leaflet + mapbox

How? can you direct me on how i can use it? thank you