Highmap不在vue组件内呈现

Question

我是vue js的新手并尝试创建一个包含内部组件高图的vue组件，但它不会加载任何帮助的地图数据。 简而言之，此组件需要从以下网址加载数据：http://code.highcharts.com/mapdata/countries/cn/custom/cn-all-sar-taiwan.js 在.html文件中使用它时工作正常，但不是.vue文件

// Mapchart.vue

<template>
<div class="mapchart">
  <div class="col-md-8">
   <highmaps :options="options"></highmaps>
  </div>
  <div class="col-md-4">
    <div class="table-responsive">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th> state </th>
             <th @click="sortBy()"> active
               <span class="arrow" :class="sortOrder > 0 ? 'asc' : 'dsc'">
               </span>
             </th>
           </tr>
         </thead>
         <tbody>
           <tr v-for="data in sortedData">
              <td>
                {{data[0]}}
              </td>
              <td>
                {{data[1]}}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script async defer src="http://code.highcharts.com/mapdata/countries/cn/custom/cn-all-sar-taiwan.js"></script>
<script>
import Vue from 'vue'
import VueHighcharts from 'vue-highcharts'
import loadMap from 'highcharts/modules/map'
import Highcharts from 'highcharts'
import highchartsMore from 'highcharts/highcharts-more'

highchartsMore(Highcharts)
loadMap(Highcharts)
Vue.use(VueHighcharts, {Highcharts})

export default {
  name: 'mapchart',
  props: [ 'mapdata' ],
  data () {
    return {
      sortOrder: -1,
      tabledata: this.mapdata,
      options: {
        title: {
          text: null
        },
        colorAxis: {
          min: 0,
          minColor: '#EEEEFF',
          maxColor: 'rgb(30, 84, 139)',
          stops: [
            [0, '#EFEFFF'],
            [0.67, 'rgb(109, 166, 221)'],
            [1, 'rgb(30, 84, 139)']
          ]
        },
        legend: {
          layout: 'horizontal',
          align: 'center',
          verticalAlign: 'bottom'
        },
        series: [{
          name: 'Country',
          mapData: Highcharts.maps['countries/cn/custom/cn-all-sar-taiwan'],
          states: {
            hover: {
              color: '#ffff33'
            }
          },
          data: this.mapdata,
          tooltip: {
            headerFormat: '',
            pointFormat: '{point.name} : {point.value}'
          }
        },
        {
          nullColor: 'gray'
        }]
      }
    }
  },
  methods: {
    sortBy: function () {
      this.sortOrder = this.sortOrder * -1
    }
  },
  computed: {
    sortedData: function () {
      var order = this.sortOrder || 1
      var data = this.mapdata.slice().sort(function (a, b) {
        return (a[1] === b[1] ? 0 : a[1] > b[1] ? 1 : -1)
      })
      data = data.slice(data.length - 10, data.length)
      data = data.slice().sort(function (a, b) {
        return (a[1] === b[1] ? 0 : a[1] > b[1] ? 1 : -1) * order
      })
      return data
    }
  }
}
</script>

<style scoped>
table {
         border: 2px solid #42b983;
         border-radius: 3px;
         background-color: #fff;
       }

       th {
         background-color: #888;
         color: rgba(255,255,255,0.66);
         cursor: pointer;
         -webkit-user-select: none;
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
       }

       td {
         background-color: #f9f9f9;
       }

       th, td {
         min-width: 120px;
         padding: 10px 20px;
       }

       .arrow {
         display: inline-block;
         vertical-align: middle;
         width: 0;
         height: 0;
         margin-left: 5px;
         opacity: 0.66;
       }

       .arrow.asc {
         border-left: 4px solid transparent;
         border-right: 4px solid transparent;
         border-bottom: 4px solid #fff;
       }

       .arrow.dsc {
         border-left: 4px solid transparent;
         border-right: 4px solid transparent;
         border-top: 4px solid #fff;
       }
</style>