problem description

I have a requirement, a text, change the content in a few seconds, with animation transition.
I have four paragraphs of text in an array. The structure is as follows:

texts = [
    {text:"aaa"},
    {text:"bbb"},
    {text:"ccc"},
    {text:"ddd"},
]

I first used jQuery"s dom.html (text) & dom.text (text) to modify the element content. The code is as follows:

//
    var timer;
    if ($.fn.fullpage.getCurIndex() === 2) {
        timeText(-1);
    } else {
        clearTimeout(timer);
    }
//
function timeText (num) {
var i = numPP >= 3 ? 0 : numPP;
timer = setTimeout(function () {
    var text = texts[i].text;
    $("-sharppage3-content").html(text);
    timeText(i);
},3000);
}

then there is a rendering problem. I removed the animation, modified the text content, and finally used Vue"s v-html & v-text , and even used the calculation attribute, breakpoint, the value of Vue is correct, and the elements in Chrome have also changed, but the elements rendered on the page are wrong and the previous one does not disappear.

finally, I changed the way to show and hide. v-show & v-if . The code is as follows. The effect is shown in figure

<div v-for="(item, index) in texts" :key="index" v-text="item.text" v-show="active === index"></div>

var vm = new Vue({
    el:"-sharpapp",
    data:{
        texts:[
        {text:"aaa"},
        {text:"bbb"},
        {text:"vvv"},
        {text:"ddd"},
      ],
      active:0
    },
    /*computed:{
        textOne:function () {
        return this.texts[this.active].text;
            }
    },*/
    methods:{
            timeText:function (num) {
                var i = numPP >= 3 ? 0 : numPP;
                vm.active = i;
                timer = setTimeout(function () {
                    vm.timeText(i);
                },3000);
            }
        }
  });

I changed my colleague"s computer to open it, and also changed my mobile phone to open the Wechat browser. The rendering is the same as the one on Chrome. Ask for answers from seniors