Issue in Vuejs, Axios and Highcharts integration s

I try to visualize data asynchronously from JSON in django 2.0 using vuejs and Highcharts. I just moved from jquery to vuejs due to its simplicity. I found out the data visualization using vue js and Highcarts is much slower than using JQuery and Highcharts.

I generate JSONResponse in different url from the chart and the axios is used to help vuejs fetching data from that url. The data first annoted and grouped by queryset in views.py. The Highcharts options also setted in backend.

here's my views.py :

  def chart_view(request):
      return render(request,'chart.html')

  def chart_data(request):
      dataset = Passenger.objects.values('embarked')\
      .exclude(embarked='')\
      .annotate(total=Count('embarked'))\
      .order_by('embarked')

      port_name = dict()
      for choices_tuple in Passenger.PORT_CHOICES:
      port_name[choices_tuple[0]] = choices_tuple[1]

      #Hicharts visualization config
      pie_chart = {
         'chart' : {'type':'pie'},
         'title' : {'text' : 'PELABUHAN'},
         'series': [{
            'name' : 'Tempat Berangkat',
            'data' : list(map(lambda row: {'name' : port_name[row['embarked']],
            'y' : row['total']},dataset))
       }]
     }

     return JsonResponse(pie_chart)

I fetch the data using axios when the el is mounted and visualize the data before update. I try to draw the chart when applicaion is updated before but it's just create forever loop which is imposible to stop the drawing process and impossible to visualize the data. However, by using beforeUpdate lifecycle hook it's still slow to visualize the data. It's need 4-7 seconds to show the chart.

Here is my template :

<!DOCTYPE html>
<html>
<head>
	<title>Using Vue Axios</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="https://code.highcharts.com/highcharts.src.js"></script>
</head>
<body>
	<div id="app">[[dataTitanic]]</div>
	<h1>The Chart Is Shown Below : </h1>
	<div id="container"></div>
	<script type="text/javascript">
		var url = "{% url 'async_chart_data' %}";
		var app = new Vue({
			delimiters : ['[[',']]'],
			el : '#app',
			data(){
				return {
					dataTitanic : null,
				}
			},
			mounted(){
				axios
				  .get(url)
				  .then(response => (this.dataTitanic = response['data']))
			},
			beforeUpdate(){
				Highcharts.chart('container',this.dataTitanic)
			}
		})
	</script>
</body>
</html>

I'm newbie in vuejs so, any suggestions will help. thanks