Component registration via CDN

[th-ink]

Hello, I am including vue-mapbox via cdn like so:

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js"></script>
     <!-- Vue-mapbox -->
   <script
     type="text/javascript"
     src="https://cdn.jsdelivr.net/npm/vue-mapbox@latest/dist/vue-mapbox.min.js"
   ></script>

and then in the JS section, am registering component like so:

  const appMap = new Vue({
    el: '.culturemap__page',
    components: {
      'mgl-map': window.VueMapbox.MglMap,
    },
    data: {
      accessToken: "*****", // your access token. Needed if you using Mapbox maps
      mapStyle: 'mapbox://styles/mapbox/streets-v11'
    },
     created(){
       console.log(this)
       this.mapbox = window.mapboxgl;
    },
  })

and in the html:

<mgl-map :map-style="mapStyle"  :access-token="accessToken" />

however when opening in browser I get the following error:

Uncaught (in promise) TypeError: Cannot set property 'accessToken' of undefined

Would anyone be able to help?
Thanks