Highcharts-vue options as variable - vue.js

Question

I want to replicate the same chart several times, using different data just like here https://jsfiddle.net/BlackLabel/qndeho5u/.
The concept works quite well but when transporting it to Vue there's something going wrong as the parameters aren't copied. For example polar isn't taken by the chart.
To avoid writing the chart options all the time I save it as a variable. On the jsfiddle it works but on my Vue code it doesn't.
What am I missing here?
<template>
<v-container fluid text-xs-center style="height: 90vh; max-height: 100%;">
<v-layout row wrap>
<v-flex xs6>
<v-card flat>
<Chart :options="chart1"/>
</v-card>
</v-flex>
<v-flex xs6>
<v-card flat>
<Chart :options="chart2"/>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import Chart from '../components/Chart.vue'
import Highcharts from 'highcharts'
var testdata2 = {name:'a', value: [
// each slice of the pie gets its own color
{ y: 10, color: '#1DACE8', name: 'a' },
{ y: 30, color: '#1C366B', name: 'b' },
{ y: 45, color: '#F24D29', name: 'c' },
{ y: 93, color: '#E5C4A1', name: 'd' },
{ y: 15, color: '#C4CFD0', name: 'e' }
]}
var testdata3 = {name:'b', value:[
// each slice of the pie gets its own color
{ y: 30, color: '#1DACE8', name: '1a' },
{ y: 20, color: '#1C366B', name: '2b' },
{ y: 35, color: '#F24D29', name: '3c' },
{ y: 23, color: '#E5C4A1', name: '4d' },
{ y: 95, color: '#C4CFD0', name: '5e' }
]}
var options = {
chart: {
polar: true,
backgroundColor: '#F5F5F5'
},
credits: {
enabled: false
},
exporting: {
buttons: {
contextButton: {
theme: {
fill: "#F5F5F5"
}
}
}
},
title: {
text: 'City 1'
},
subtitle: {
text: 'Railacc stuff'
},
pane: {
startAngle: -22.5
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: false
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0,
colorByPoint: true
}
},
tooltip: {
formatter: function() {
return this.y, this.point.name;
}
}
}
export default {
name: 'chartapp2',
components: {
Chart,
},
data() {
return {
chart1:{
options,
legend: {
enabled: false
},
series: [{
type: 'column',
data: testdata2.value,
pointPlacement: 'between'
}]
},
chart2:{
options,
legend: {
enabled: false
},
series: [{
type: 'column',
data: testdata3.value,
pointPlacement: 'between'
}]
},
}
},
}
</script>

Answer 1

I have reproduced this chart for you in Vue framework. Take a look at it and let me know if something is not clear for you.
Demo:
https://codesandbox.io/s/vue-template-9xb0c?fontsize=14