Converting from a slider to a chart graph

I have a library https://splade.dev/docs/using-vue-libraries. I’m using the Splade table.
I have app.js:

import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel';

const el = document.getElementById("app");

const app = createApp({
    render: renderSpladeApp({ el }),
})
.use(SpladePlugin, {
    "max_keep_alive": 10,
    "transform_anchors": false,
    "progress_bar": true,
})
.component('Carousel', Carousel)
.component('CarouselSlide', Slide)
.component('CarouselCharts', Chart)
.component('CarouselPagination', Pagination)
.component('CarouselNavigation', Navigation)
.mount(el);

There are also test data in the controller:

$products = [
    [
        'id' => 1,
        'name' => 'T-shirt',
        'price' => 20.99,
        'description' => 'Simple T-shirt',
    ],
    [
        'id' => 2,
        'name' => 'Jeans',
        'price' => 39.99,
        'description' => 'Classic jeans',
    ], 
];

And I don’t know what to display in Blade.”

I tried adding this, but it doesn’t work:

<Carousel>
    @foreach($charts as $key => $chart)
        <CarouselSlide key="{{ $key }}">
            <CarouselCharts :chart-data="$chart" />
        </CarouselSlide>
    @endforeach

    <template #addons>
        <CarouselNavigation />
        <CarouselPagination />
    </template>
</Carousel>