Vue 3: Slides blinking when changing a route

[michaelprys]

Checks

• [X] Not a duplicate.
• [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

0.6.12

Description

I use Vue 3 and vue-router. I loop through the slides, instide which I have <ItemCard/> component, where I have a router-link 'View more' that leads to another route when you click on it. When I click on this link, the slides blink, also they align vertically for some reason. You can see a 0.5sec blink on the video I uploaded on veed.io - https://www.veed.io/view/ade31623-1112-4032-b240-99f8f0b2a047?sharingWidget=true&panel=share.

What causes this issue?

Reproduction Link

No response

Steps to Reproduce

<template>
    <Splide class="splide__track" :options="options" :has-track="false">
        <SplideTrack>
            <SplideSlide
                class="splide__slide"
                v-for="recipe in storeRecipe.data"
                :key="recipe.id">
                <ItemCard :data="recipe" :pending="storeRecipe.pending" />
            </SplideSlide>
        </SplideTrack>
        <div class="splide__pagination">
            <div class="splide__pagination__page is-active" />
        </div>
    </Splide>
</template>

<script setup>
import { Splide, SplideSlide, SplideTrack } from '@splidejs/vue-splide';
import { ref, onMounted } from 'vue';
import { useStoreRecipe } from '@/store/storeRecipe';
import ItemCard from '@/component/ItemCard.vue';

const storeRecipe = useStoreRecipe();

const isActive = ref(true);

// slider setup
const options = {
    arrows: false,
    gap: '2.5rem',
    mediaQuery: 'min',
    breakpoints: {
        320: {
            perPage: 1,
        },
        801: {
            perPage: 2,
        },
        1040: {
            perPage: 3,
        },
    },
};

onMounted(async () => {
    await storeRecipe.loadRecipes();
});
</script>

<style lang="scss">
@import '@splidejs/vue-splide/css/core';

.splide__track {
    padding-inline: 1rem;
    margin-inline: auto;
}

@media (width <= $screen-md) {
    .splide__track {
        max-width: 26rem;
    }
}
</style>

Expected Behaviour

There shouldn't be any blinking.