Slider.vue

<template>
    <div class="slider">
        <Slide v-for="(item, index) in items" v-bind:key="index" ref="slide" />
    </div>
</template>

<script>
import Slider from '@/components/Slide';

export default {
    data() {
        return {
            index: 0,  
            allowSlide: true,
        };
    },

    components: {
        Slider,
    },

    methods: {
        next() {
            this.allowSlide = false;

            const currentIndex = this.index;
            const nextIndex = index + 1;

            const timeline = new gsap.timeline({ onComplete: this.allowSlide });

            timeline.add(this.$refs.slide[index].transitionOut(), 0);
            timeline.add(this.$refs.slide[nextIndex].transitionIn(), 0);

            this.index = nextIndex;
        },

        previous() {
            this.allowSlide = false;

            const currentIndex = this.index;
            const nextIndex = index - 1;

            const timeline = new gsap.timeline({ onComplete: this.allowSlide });

            timeline.add(this.$refs.slide[index].transitionOut(), 0);
            timeline.add(this.$refs.slide[nextIndex].transitionIn(), 0);
        },    

        allowSlide() {
            this.allowSlide = true;
        },
    },
}
</script>