Splide grid is not working for dynamically added slides

[ayank007]

const slider = new Splide(".slider",{
    type   : 'loop',
    drag   : 'free',
    gap: 20,
    loop: true,
    autoplay: true,
    interval: 3000,
    speed: 600,
    pagination: false,
    arrows: false,
    // gap: 5,
    // perPage: 1,
    // grid: {
    //     rows: 2,
    //     cols: 2,
    // },
    width: "200",
    breakpoints: {
        530: {
            gap: 5,
            perPage: 1,
            grid: {
                rows: 2,
                cols: 2,
            },
        },
    },
})
slider.mount(window.splide.Extensions)
for(let i = 0; i < logo.length; i += 1){
    slider.add(`
        <div class="splide__slide">
            <div class="client">
                <img src="/storage/clients/${logo[i].toLowerCase()}.jpg" loading="lazy" />
                <p>${logo[i]}</p>
            </div>
        </div>
    `)
}

I am dynamically adding slides in the slider.
It works when I open the webpage with window.innerWidth > 530px, and then reduce the window.innerWidth to < 530px.
But does not work when I reload the page with window.innerWidth < 530px.
It also does not work when I do this -

const slider = new Splide(".slider",{
    type   : 'loop',
    drag   : 'free',
    gap: 20,
    loop: true,
    autoplay: true,
    interval: 3000,
    speed: 600,
    pagination: false,
    arrows: false,
    gap: 5,
    perPage: 1,
    grid: {
         rows: 2,
         cols: 2,
    },
})
slider.mount(window.splide.Extensions)

[ShahriarKh]

I think the screen size doesn't matter here. The reason the grid works after changing the screen size is because the slider gets "refreshed", so the grid is created again, correctly.
Related: #916