vue.js карта mapbox не отображается

Question

Я хочу, чтобы моя карта показывалась, но не важно, что я делаю, карта не отображается.

Текущий код, который я использую, следующий:

<template>
    <div>
        <MglMap
            :accessToken="mapboxAccessToken"
            :mapStyle.sync="mapStyle"
            :center="coordinates"
        />

        <button class="btn btn-contained btn-success add-location" v-on:click="addLocation"><span>Button</span></button>
    </div>

</template>

<script>
    import Mapbox from "mapbox-gl";
    import { MglMap } from "vue-mapbox";

    export default {
        components: {
            MglMap
        },
        props: {
            currLat: Number,
            currLon: Number,
            allPoints: Array
        },
        // Mounted (page load), we ask to track
        mounted: function () {
            const options = {
                enableHighAccuracy: true
            };
            this.$watchLocation(options)
                .then(coordinates => {
                    // Set the center to my coordinates
                    this.currLat = coordinates.lat;
                    this.currLon = coordinates.lng;
                    // Emit the user data to all connected devices.
                    this.$socket.emit('USER_COORDS', {
                        'user': this.$socket.id,
                        'lat': this.currLat,
                        'lon': this.currLon
                    });
                });
        },
        data() {
            return {
                mapboxAccessToken: "removed",
                mapStyle: "mapbox://styles/mapbox/streets-v10",
                coordinates: [0.0, 0.0]
            };
        },
        created() {
            // We need to set mapbox-gl library here in order to use it in template
            this.map = Mapbox;
        },
        methods: {
            geolocateError(control, positionError) {
                // console.log(positionError);
                Latte.ui.notification.create({
                    title: "An error occurred!",
                    message: "We could not get your location, please try again by reloading the application."
                });
            },
            geolocate(control, position) {
                console.log(
                    `User position: ${position.coords.latitude}, ${position.coords.longitude}`
                )
            },
            addLocation: function() {
                this.$socket.emit('NEW_LOCATION', {
                    name: 'VK1',
                    lat: this.currLat,
                    lon: this.currLon
                });
            }
        },
        sockets: {
            USER_COORDS_DATA: function (data) {
                // user connects, data of the current location gets emitted
                // this.map.flyTo({
                //     center: [data.lon, data.lat],
                //     zoom: 15,
                //     speed: 1
                // });
                // console.log(data)
            },
            NEW_LOCATION_DATA: function (data) {
                // Returned data from the server (after storage)
                console.log(data)
            },
        },
    }
</script>

<style>
    @import '../../node_modules/mapbox-gl/dist/mapbox-gl.css';
    #map {
        width: 100%;
        height: calc(100vh - var(--app-bar-height));
    }
    .btn.add-location {
        position: absolute;
        left: 2rem;
        bottom: 2rem;
    }
</style>

Я получаю следующий вывод в моей консоли:

Я понятия не имею, что здесь происходит, даже не знаю, почему я получаю домисключение?

Я просто хочу, чтобы моя карта отображалась и показывала маркер на вашем месте, есть идеи, что здесь происходит?Почему карта не отображается?

Используемые пакеты:
- "mapbox-gl": "^1.3.1",
- "vue-mapbox": "^0.4.1",