Error #17 when trying Large Heatmap

[quesurifn]

Hello,

I am recieving error #17. Im not sure if this is normal.
I have double checked the dependancies listed here:

How can this be fixed?

<template>
  <div class="hello">
    <!-- <h1>{{ msg }}</h1> -->
    <div class="row">
      <div class="col-md-12">
        <gmap-map style="width: 100%; height: 450px;"
            :center="{lat: 41.8781, lng: -87.629798}"
            :zoom="12" :map-type-id="roadmap" :options="{styles: mapStyles}"
        >

        </gmap-map>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
          <vue-highcharts :options="heatmapOptions" ref="heatmapChart"></vue-highcharts>
      </div>
    </div>
  </div>
</template>

<script>
import * as VueGoogleMaps from 'vue2-google-maps'
import VueHighcharts from 'vue2-highcharts'
import Highcharts from 'highcharts'
import Heatmap from '../../node_modules/highcharts/modules/heatmap.js'
import Exporting from '../../node_modules/highcharts/modules/exporting.js'
import Data from '../../node_modules/highcharts/modules/data.js'
import BoostCanvas from '../../node_modules/highcharts/modules/boost-canvas.js'
import Boost from '../../node_modules/highcharts/modules/boost.js'


import axios from 'axios';

Heatmap(Highcharts)
Exporting(Highcharts)
Data(Highcharts)
BoostCanvas(Highcharts)
Boost(Highcharts)

import Vue from 'vue';

  Vue.use(VueGoogleMaps, {
    load: {
      key: 'AIzaSyAeRd_fOOHn4GCQSeVhgm7ioUjXypqj2C8',
      // libraries: 'places', //// If you need to use place input
    }
  })

export default {
  components: {
            VueHighcharts
        },
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      heatMapData: {}
    }
  },
  created() {
    axios.get('https://api.myjson.com/bins/riv3h')
    .then(function(response) {
      console.log(response)
      Vue.heatMapData = response.data
    })
    .catch(function(err) {
      console.error(err)
    })
  },
  computed: { 
    mapStyles() {
      return [{
          stylers: [{
            hue: '#890000'
          }, {
            visibility: 'on'
          }, {
            gamma: 0.5
          }, {
            weight: 0.5
          }]
        }, {
          elementType: 'labels',
          stylers: [{
            visibility: 'off'
          }]
        }, {
          featureType: 'water',
          stylers: [{
            color: '#890000'
          }]
        }];
    },
    heatmapOptions() {
     return { 
       data: {
        json: this.heatMapData
    },

    chart: {
        type: 'heatmap',
        margin: [60, 10, 80, 50]
    },

    boost: {
        useGPUTranslations: true
    },

    title: {
        text: 'Highcharts heat map',
        align: 'left',
        x: 40
    },

    subtitle: {
        text: 'Temperature variation by day and hour through 2013',
        align: 'left',
        x: 40
    },

    xAxis: {
        type: 'datetime',
        min: Date.UTC(2013, 0, 1),
        max: Date.UTC(2014, 0, 1),
        labels: {
            align: 'left',
            x: 5,
            y: 14,
            format: '{value:%B}' // long month
        },
        showLastLabel: false,
        tickLength: 16
    },

    yAxis: {
        title: {
            text: null
        },
        labels: {
            format: '{value}:00'
        },
        minPadding: 0,
        maxPadding: 0,
        startOnTick: false,
        endOnTick: false,
        tickPositions: [0, 6, 12, 18, 24],
        tickWidth: 1,
        min: 0,
        max: 23,
        reversed: true
    },

    colorAxis: {
        stops: [
            [0, '#3060cf'],
            [0.5, '#fffbbc'],
            [0.9, '#c4463a'],
            [1, '#c4463a']
        ],
        min: -15,
        max: 25,
        startOnTick: false,
        endOnTick: false,
        labels: {
            format: '{value}℃'
        }
    },

    series: [{
        boostThreshold: 100,
        borderWidth: 0,
        nullColor: '#EFEFEF',
        colsize: 24 * 36e5, // one day
        tooltip: {
            headerFormat: 'Temperature<br/>',
            pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ℃</b>'
        },
        turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
      }]
    }
    } 
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

[superman66]

Hi @quesurifn , the code looks normal。I'm not sure if the problem is on the heatmapOptions.data option。
According to data | Highcharts API Reference, it does not support json option in the data modules.