apple mapkitをNuxt.jsで表示する

Nuxt.jsでappleのmapを表示するのに少しハマったので、サンプルです。

map.vue

<template>
  <!-- 地図用のコンテナを作成する -->
  
  <section class="container">
    <div id="map" /></div>
  </section>
</template>

<script>
export default {

  data: function(){
        return {
        };
  },

  async created () {
    await this.mount() 
    console.log(window.mapkit)

    
    // MapKit JSを初期化する
    window.mapkit.init({
      authorizationCallback: function(done) {
        done("-- API Key --");
        }
    });

    // Mapオブジェクトを作成する
    var map = new window.mapkit.Map("map");

    // 地図の表示範囲を指定する
    var tokyo = new window.mapkit.CoordinateRegion(
      new window.mapkit.Coordinate(35.6811673, 139.7670516),
      new window.mapkit.CoordinateSpan(0.04, 0.04)
    );
    map.region = tokyo;
    
  },
  methods: {
    async mount (version = '5.0.x') {
      return new Promise((resolve, reject) => {
        const src = `https://cdn.apple-mapkit.com/mk/${version}/mapkit.js`

        if (window.mapkit) {
          return resolve(window.mapkit)
        }

        const script = document.createElement('script')
        script.onload = () => resolve(window.mapkit)
        script.onerror = (error) => reject(error)
        document.body.appendChild(script)
        script.src = src
      })
    },
  }
}

</script>
<style>
        #map {
            width: 100%;
            height: 300px;
        }
</style>