Vue3 Chart not updating after sending data into Data series in Apex Chart - vue.js

Question

When I send data into the apex chart array that I took from my json file with axios, the chart does not automatically renew itself in Vue3
With Axios, I fetch all the apexcharts in the json file and add them to the elementCustomize array. Then I push the data in the elementDataseries array into elementCustomize[i].options.series one by one, the data goes into the series of the related apexchart successfully, but I can't see the change in the chart in the page. I can see the data whenever I write a text in the page and save it.
Can you help me?
That is my json file
"elementCustomize": [
{
"id": "2023024145531",
"customizeId": 0,
"elementId": 2023024145531,
"pageId": 1,
"zone": "zone1",
"options": {
"series": [ {
"elementId" : 2023024145531,
"dataId" : 123453576978982,
"name" : "Data 1",
"data" : [-44,55,187,11,61,22,63,45,3]
}],
"chart": {
"type": "bar",
"height": 280,
"toolbar": {
"show": true,
"tools": {
"download": true,
"selection": true,
"zoom": true,
"zoomin": true,
"zoomout": true,
"pan": true,
"reset": true
}
}
},
"plotOptions": {
"bar": {
"horizontal": false,
"columnWidth": "55%",
"endingShape": "rounded"
}
},
"colors": [
"#0150581244",
"#2196F3",
"#4CAF50",
"#9C27B0"
],
"dataLabels": {
"enabled": false
},
"stroke": {
"show": true,
"width": 2,
"colors": [
"transparent"
]
},
"xaxis": {
"categories": [
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct"
]
},
"yaxis": {
"title": {
"text": "$ (thousands)"
}
},
"fill": {
"opacity": 1
},
"legend": {
"position": "top",
"horizontalAlign": "center"
},
"title": {
"text": "Multiple Bars",
"align": "left"
},
"tooltip": {
"y": {}
}
}
},
{
"id": "2023025111221",
"customizeId": 0,
"elementId": "2023025111221",
"pageId": 1,
"zone": "zone3",
"options": {
"series": [],
"chart": {
"type": "bar",
"height": 280,
"toolbar": {
"show": true,
"tools": {
"download": true,
"selection": true,
"zoom": true,
"zoomin": true,
"zoomout": true,
"pan": true,
"reset": true
}
}
},
"plotOptions": {
"bar": {
"horizontal": false,
"columnWidth": "55%",
"endingShape": "rounded"
}
},
"colors": [
"#0150581244",
"#2196F3",
"#4CAF50",
"#9C27B0"
],
"dataLabels": {
"enabled": false
},
"stroke": {
"show": true,
"width": 2,
"colors": [
"transparent"
]
},
"xaxis": {
"categories": [
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct"
]
},
"yaxis": {
"title": {
"text": "$ (thousands)"
}
},
"fill": {
"opacity": 1
},
"legend": {
"position": "top",
"horizontalAlign": "center"
},
"title": {
"text": "Multiple Bars",
"align": "left"
},
"tooltip": {
"y": {}
}
}
}
]
The process where I pull this data from the json and sync it into the array
onBeforeMount(async () => {
await api.get(jsonServerUrl+"elementCustomize?pageId="+pageID).then(response=>{
elementCustomize = response.data
})
}
That is my apex chart code
<div v-for="item in filteredCustomize('zone1')" :key="item.id" class="drag-item s-card">
<ApexChart
id="apex-chart-1 chart"
:height="item.options.chart.height"
:type="item.options.chart.type"
:series="item.options.series"
:options="item.options"
>
</ApexChart>
{{item.options.series}}
<div class="elementHeadBar hover" align="start">
<VButton icon="feather:edit-2" color="info" :loading="loading" raised #click="updateSeries(item)"> test push series </VButton>
</div>
</div>
filteredCustomize for filtering areas, because i have 3 column in page. zone1, zone2, zone3 etc.
const filteredCustomize=(e)=>{
return elementCustomize.filter(item => item.zone === e)
}
I am posting fake datas with updateseries function.
const updateSeries = (item)=> {
let matchingData = elementDataSeries.filter(e => e.elementId == item.id)
if (matchingData){
for(let i = 0; i < elementCustomize.length; i++) {
for(let j = 0; j < elementDataSeries.length; j++) {
if(elementCustomize[i].elementId === elementDataSeries[j].elementId) {
elementCustomize[i].options.series.push(elementDataSeries[j]);
}
}
}
}else{
console.log("no")
}
console.log(elementCustomize)
}
i tried watch but it doesn't work. i read something in forums. when post data into apexchart series, it have to re render automatically.