Highcharts-more.js doesn't work in vue-cli project

these few weeks Im working on a vue-cli project and I am trying to make a polar chart like this: https://www.highcharts.com/demo/polar-spider

As this chart required highchart-more file, so I install and import the highcharts and highchart-more library using npm. However After importing both file, i got the following error in my chrome console and the highchart cannot be load. Error

highcharts-more.js?7b43:8 Uncaught TypeError: p is not a function
at eval (eval at <anonymous> (app.js:874), <anonymous>:8:212)
at eval (eval at <anonymous> (app.js:874), <anonymous>:11:205)
at eval (eval at <anonymous> (app.js:807), <anonymous>:39:67)
at Object.<anonymous> (app.js:807)
at __webpack_require__ (app.js:658)
at fn (app.js:86)
at Object.<anonymous> (app.js:1182)
at __webpack_require__ (app.js:658)
at app.js:707
at app.js:710

If i only import the highchart file, the plugin can be load but only look like this (basic line graph, not polar chart) https://www.highcharts.com/demo/line-basic

How can I use the highchart-more file correctly? Thanks!!

Here is my code:

main.js file

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'

// import $ from 'jquery'
import VueHighcharts from 'vue-highcharts'
import HighchartsMore from 'highcharts/highcharts-more'
Vue.use(VueRouter)
Vue.use(VueResource)

Vue.use(VueHighcharts)
HighchartsMore(VueHighcharts)

const router = new VueRouter({
  routes: [
   {
      path: '/result',
      name: 'result',
      component: Result
    },
    { path: '/*', redirect: '/introduction' }                 // Redirect all path to /hello
  ]
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
  data: {
    currentSection: 1,
    currentCategory: 1
  }


   })

Result.vue file

<template>
  <div>
    <highcharts :options="options"></highcharts>

    <div class="col-sm-9">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  var options = {

    chart: {
      polar: true
    },

    title: {
      text: 'Highcharts Polar Chart'
    },

    pane: {
      startAngle: 0,
      endAngle: 360
    },

    xAxis: {
      tickInterval: 45,
      min: 0,
      max: 360,
      labels: {
        formatter: function () {
          return this.value + '°'
        }
      }
    },

    yAxis: {
      min: 0
    },

    plotOptions: {
      series: {
        pointStart: 0,
        pointInterval: 45
      },
      column: {
        pointPadding: 0,
        groupPadding: 0
      }
    },

    series: [{
      type: 'column',
      name: 'Column',
      data: [8, 7, 6, 5, 4, 3, 2, 1],
      pointPlacement: 'between'
    }, {
      type: 'line',
      name: 'Line',
      data: [1, 2, 3, 4, 5, 6, 7, 8]
    }, {
      type: 'area',
      name: 'Area',
      data: [1, 8, 2, 7, 3, 6, 4, 5]
    }]

  }

  export default {
    data () {
      return {
        options: options
      }
    }
  }
</script>

via Alick Wong