在wordpress中使用vue js更新数据时，html不会更新

Question

我正在尝试在wordpress中使用vue js。实例化vue实例是一个棘手的解决方案。这是我的代码

这是我的html

<headerStyleOne>
<div class="_1header">

        <div class="_1header_content">
        <div class="_1header_content_main" :style="{'background-image': `url(${url})`}" >

            <div class="_1header_content_card">
            <p class="_1header_content_card_last"> {{url}}</p>

            <h3 class="_1header_content_card_title">{{currentIndex}}</h3>


            </div>
        </div>
        </div>


    </div>
</div>
</headerStyleOne>

如您所见，它具有url和currentIndex，但是它们只在第一次更新时更新，而在数据变化时从不更新，这是vue代码。

for (var i = 0; i < list.length; i++) {
        list[i].setAttribute("id", "app-" + i);
        var app = new Vue({
        el: "#app-" + i,
            data(){
                return {
                    headerStyleOneSetting: headerStyleOneSetting, 
                    bannerUrls : [], 
                    currentIndex : 0, 
                    nextIndex : 1, 
                    timer: 3, 
                    url: ''
                }
            }, 
            methods: {
                changeBanner(){
                   console.log('I am being called', this.currentIndex)
                   if(this.nextIndex==2){ // next index is already last
                         this.currentIndex = 2
                         this.nextIndex = 0 
                    }else if(this.currentIndex==2){
                        this.currentIndex = 0
                        this.nextIndex = 1 
                    }
                    else{
                        this.currentIndex++ 
                        this.nextIndex++ 
                    }

                    this.url = this.bannerUrls[this.currentIndex].url

                    setTimeout(() => {
                        this.changeBanner()
                    }, this.timer*1000);
                }, 

            },
            created(){
                let timer = parseInt(this.headerStyleOneSetting.timer)
                if(timer) this.timer = timer
                this.bannerUrls.push(this.headerStyleOneSetting.bannerOne)
                this.bannerUrls.push(this.headerStyleOneSetting.bannerTwo)
                this.bannerUrls.push(this.headerStyleOneSetting.bannerThree)
                this.url = this.bannerUrls[0].url
                setTimeout(() => {
                    this.changeBanner()
                }, this.timer*1000);
            }, 


        })

    }

在这里，我只是旋转currentIndex以显示不同的图像。

有人知道这里出了什么问题吗？

谢谢。