Getting different - vue.js

Question

I have a problem related to Vue.js probs (I guess). I have a chart which fetches data in the created() from an API which looks like this:
<template>
<div>
<highcharts if="data.length > 0" :options="chartOptions" ></highcharts>
</div>
</template>
<script>
import { Chart } from "highcharts-vue";
import Highcharts from "highcharts";
import exportingInit from "highcharts/modules/exporting";
exportingInit(Highcharts);
export default {
props: {
partsdata: {
type: Array
}
},
created() {
this.$http.get('http://127.0.0.1:5000/data/')
.then(response => {
var result = JSON.parse(response.data)
return result
}).then(data => {
var result = data.Fare
console.log(result) // eslint-disable-line no-console
this.chartOptions.series[0].data = [] // Array wieder zurücksetzen
for(var key in result) {
this.chartOptions.series[0].data.push(result[key]) // eslint-disable-line no-console
}
})
},
components: {
highcharts: Chart
},
data() {
return {
data: [],
chartOptions: {
title: {
text: 'Title aligned left',
align: 'left',
x: 0
},
series: [{
type: "column",
data: [] // sample data
}]
}
}
}
};
</script>
<style scoped>
.btn-primary {
padding: 10px 20px;
background: white;
color: black;
margin-top: 15px;
margin-bottom: 15px;
border-radius: 5px;
}
</style>
This is my parent component, where I use my Charts, which works fine.
<template>
<v-container grid-list-md text-xs-center>
<v-layout row wrap>
<v-flex xs6>
<v-card dark color="white">
<v-card-text class="px-0">
<Highcharts></Highcharts>
</v-card-text>
</v-card>
</v-flex>
<v-flex xs6>
<v-card dark color="white">
<v-card-text class="px-0">
<Highcharts></Highcharts>
</v-card-text>
</v-card>
</v-flex>
<v-flex xs6>
<v-card dark color="white">
<v-card-text class="px-0">
<Highcharts></Highcharts>
</v-card-text>
</v-card>
</v-flex>
<v-flex xs6>
<v-card dark color="white">
<v-card-text class="px-0">
<Highcharts></Highcharts>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import Highcharts from "./Header.vue"
export default {
components: {
Highcharts: Highcharts
}
}
</script>
<style scoped>
</style>
However, what I want is to fetch the data from different Endpoints without creating a ton of new components. Is there a way to use the created() lifecycle hook as props or are there any other clever solutions how to archieve this?