Attach correct data format to draw a chart - arrays

Question

I'm new to Vuejs, vue-Chartkick, and Chartjs. I was trying to insert the restructured data into an object to draw a multiple-series chart. But it did not work.
<template>
<line-chart :data="data"></line-chart>
</template>
<script>
import axios from "axios";
export default {
name: 'SummaryGraph',
data () {
return {
data: [
{name: 'A', data: {}},
{name: 'B', data: {}}
]
}
},
created() {
let apiURL_1 = axios.get('http://localhost:3000/MyfirstData');
let apiURL_2 = axios.get('http://localhost:3000/MysecondData');
axios.all([apiURL_1, apiURL_2]).then(axios.spread((first_response, second_response) => {
this.data[0]['data'] = first_response.data.reduce(function(result, current) {return Object.assign(result, current);}, {});
this.data[1]['data'] = second_response.data.reduce(function(result, current) {return Object.assign(result, current);}, {});
})).catch(error => {
console.log(error)
});
}
}
</script>
The 1st original returned data:
[{"A":6},{"B":6},{"C":4}]
The 2nd original returned data:
[{"A":1},{"B":2},{"C":2}]
The 1st data after restructured by using reduce method.
{"A": 6,"B": 6,"C": 4}
The 2nd data after restructured by using reduce method.
{"A": 1,"B": 2,"C": 2}
If I directly insert the 1st and 2nd restructured data into the Vue instance
Like this:
<script>
export default {
name: 'SummaryGraph',
data () {
return {
data: [
{name: 'A', data: {"A": 6,"B": 6,"C": 4}},
{name: 'B', data: {"A": 1,"B": 2,"C": 2}}
]
}
}
}
</script>
It worked. The graph showed up. I don't know why.