Error: Maximum recursive updates exceeded when trying to render fetched data - vue.js

Question

I am trying to fetch some data from an API, do some data formatting, and then feed that data to my Chart component but I get the following error when trying to do so:
Uncaught (in promise) Error: Maximum recursive updates exceeded. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.
This is how my code looks like:
<template>
<apexchart type="rangeBar" :options="chartOptions" :series="sceneAttributes"></apexchart>
</template>
<script>
import { ref } from 'vue';
setup() {
const sceneAttributes = ref([]);
fetch(`apiUrl`)
.then(resp => resp.json())
.then(data => {
// const atts = [];
for (const key in data.sceneAttributeValues) {
data.sceneAttributeValues[key].forEach(att => {
let obj = {};
obj.data = [];
obj.data.push({
x: att.attributeValue.attributeId,
y: [att.from, att.to+1]
})
// obj.from = att.from;
// obj.to = att.to;
if (att.attributeValue.strValue) {
obj.name = att.attributeValue.strValue;
}
if (att.attributeValue.intValue) {
obj.name = att.attributeValue.intValue;
}
if (att.attributeValue.boolValue) {
obj.name = att.attributeValue.boolValue;
}
sceneAttributes.value.push(obj)
})
}
// End of first for loop
});
return { sceneAttributes }
}
}
I have to do this convoluted data formatting because the raw data I get from the fetched JSON.
{
"sceneAttributeValues": {
"Object Distance": [
{
"attributeValue": {
"attributeId": "Object Distance",
"intValue": 39
},
"from": 29,
"to": 123
}
],
"Object Detection": [
{
"attributeValue": {
"attributeId": "Object Detection",
"strValue": "Yes"
},
"from": 79,
"to": 122
}
],
}
}
Any hint on what I'm doing wrong would be greatly appreciated.

Answer 1

I guess using AXIOS for requesting an API might help you
Here is the document on how to use axios in Vue : Using Axios to Consume APIs
Don't forget to install and import axios before using it , To install axios you need to run this command in your project directory :
npm i axios
Here you can find more info about axios : axios-npm