Update the data of Carousel in IView, there is an error clicking the button.

in .Vue,

data(){
    appData:[
            {
                imgs: "https://img.codeshelper.com/upload/img/2021/03/14/sc102be2wyb8338.jpg",
                bannerText: "banner111"
            },
            {
                imgs: "https://img.codeshelper.com/upload/img/2021/03/14/tccrhhlrw0s8339.jpg",
                bannerText: "banner222"
            },
            {
                imgs: "https://img.codeshelper.com/upload/img/2021/03/14/ach2ymievvi8340.jpg",
                bannerText: "banner333"
            }
         ]
}

the template:

 <Carousel v-model="value3"
            :autoplay="true">
    <CarouselItem v-for="item in appData"
        :key="item.imgs">
        ...
            <img :src="item.imgs" />
        ...
    </CarouselItem>
</Carousel>

after a time,i would like to change the "appData":

[{"imgs":"https://img.codeshelper.com/upload/img/2021/03/14/s3q5w0bf0f48342.jpg","bannerText":"2","url":""},{"imgs":"https://img.codeshelper.com/upload/img/2021/03/14/jfei3ghfjl18343.jpg","bannerText":"1","url":""}]

The Carousel seems doing right.
But when i click the button (radius-dot or arrow-button), the three page show.

Mar.14,2021

I found the problem, I merged the data elsewhere

Menu