How to implement transition on reactive variable in vue js?

Question

Vue.js

The question is how to implement element change through fade using transition tag or any other way.
Desired result: the text of the comment changes to the next one every 5 seconds, while the text of the previous comment gradually disappears, and the next one gradually appears.
Without using transition, the text changes (the variable is reactive), but it does it "instantly", but I want to apply the "fading" animation.

Code in template:

<template>
    <transition name="fade">{{Comments[currentComment].comment}}</transition>
</template>

Code in script:

<script>
    export default {
        name: "Comments",
        components: {
            Comment
        },
        data () {
            return {

                Comments:[
                    {id: 1, comment: 'I like working with your company. The website is well organized and makes updating and mapping properties easy. I honestly don’t have any complaints. Everything is great. Thank you.', name: 'Paul Miraldi', nameComment: 'Works with the program for 6 months', image: '/storage/landing/customers/1.png'},
                    {id: 2, comment: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi finibus leo vel risus cursus, non rhoncus felis vehicula. Curabitur elit lorem, pulvinar ut malesuada et, ultricies nec mauris.', name: 'John Smith', nameComment: 'Works with the program for 10 months', image: '/storage/landing/customers/2.png'},
                    {id: 3, comment: 'Pellentesque sit amet aliquam erat. Integer congue dui a molestie hendrerit. Aliquam pellentesque ante libero, semper rhoncus dolor ultricies quis.', name: 'August Aurelius', nameComment: 'Works with the program for 1 month', image: '/storage/landing/customers/3.png'},
                    {id: 4, comment: 'Aenean id leo tempor, malesuada mi sit amet, cursus diam. Duis tristique et lorem a pellentesque. Vivamus tincidunt fringilla massa, in tristique enim semper nec.', name: 'Vasya Pupkin', nameComment: 'Works with the program for 1 year', image: '/storage/landing/customers/4.png'},
                    {id: 5, comment: 'Integer vitae risus aliquet, varius orci in, pharetra mi. Nullam eu quam sed arcu porttitor lacinia ut a augue. Suspendisse ultricies nunc in ex maximus, id tempus ligula efficitur.', name: 'Roman Smirnov', nameComment: 'Works with the program for 3 years', image: '/storage/landing/customers/5.png'},

                ],
                currentComment: 0,


            }
        },
        methods: {
            nextComment(){
                if(this.currentComment >= this.Comments.length - 1){
                    this.currentComment=0
                }
                else {
                    this.currentComment++
                }
            },
        },
        mounted(){
                let vm = this;

                setInterval(function(){
                    vm.nextComment()
                }, 5000)

        }
    }
</script>

Styles:

<style lang="scss">

    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active до версии 2.1.8 */ {
        opacity: 0;
    }

</style>

The documentation says that transition will work in four cases:
- Conditional rendering (using v-if)
- Conditional rendering (using v-show)
- Dynamic components
- Component roots

But I can't figure out how to apply any one of these cases

Answer 1

I implemented the task through v-bind, while substituting the id of the current comment into it. I also specified the transition method through mode=out-in, so that the old comment first disappears, then a new one appears.

<transition mode="out-in" name="fade">
    <div v-bind:key=currentComment>
        {{Comments[currentComment].comment}}
    </div>
</transition>