Creating chart component with ApexCharts VUEJS - vuejs3

Question

I would like some help to create a chart component with APEXCHARTS, I tried here in several ways to create a component so that I can use it anywhere else, just passing the data to populate it, but I couldn't, how can I do it?
I was wanting this chart
https://apexcharts.com/vue-chart-demos/bar-charts/stacked/
i tried to do it this way
<template>
<div class="example">
<apexchart
width="800"
height="500"
type="bar"
:options="chartOptions"
:series="series"
></apexchart>
</div>
</template>
<script setup>
/* eslint-disable */
import { computed} from "vue";
const props = defineProps({
width: {
type: [Number, String],
default: "auto",
},
height: {
type: [Number, String],
default: "auto",
}
});
const data = computed(() => {
return {
series: [{
name: 'Marine Sprite',
data: [44, 55, 41, 37, 22, 43, 21]
}, {
name: 'Striking Calf',
data: [53, 32, 33, 52, 13, 43, 32]
}, {
name: 'Tank Picture',
data: [12, 17, 11, 9, 15, 11, 20]
}, {
name: 'Bucket Slope',
data: [9, 7, 5, 8, 6, 9, 4]
}, {
name: 'Reborn Kid',
data: [25, 12, 19, 32, 25, 24, 10]
}],
chartOptions: {
chart: {
type: 'bar',
height: 350,
stacked: true,
},
plotOptions: {
bar: {
horizontal: true,
dataLabels: {
total: {
enabled: true,
offsetX: 0,
style: {
fontSize: '13px',
fontWeight: 900
}
}
}
},
},
stroke: {
width: 1,
colors: ['#fff']
},
title: {
text: 'Fiction Books Sales'
},
xaxis: {
categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
labels: {
formatter: function (val) {
return val + "K"
}
}
},
yaxis: {
title: {
text: undefined
},
},
tooltip: {
y: {
formatter: function (val) {
return val + "K"
}
}
},
fill: {
opacity: 1
},
legend: {
position: 'top',
horizontalAlign: 'left',
offsetX: 40
}
},
};
});
</script>
<template>
<StackedBarChart />
</template>
<script setup>
import StackedBarChart from "#/components/apex-charts/StackedBarChart.vue";
.....
</script>
but when I call it it gives errors
apexcharts.common.js:6 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'type')
at t2.value (apexcharts.common.js:6:80897)
at t2.value (apexcharts.common.js:6:88989)
at new t2 (apexcharts.common.js:14:21270)
at init (vue3-apexcharts.common.js:353:21)