Javascript 页内加载滑块不工作（Vue项目）

我正在vue项目上创建滑块。以下是html代码：

<div class="slideshow-container">
    <div class="mySlides fade" v-for="(consultation, index) in consultations" :key="index" @mouseover="stopSlider = true" @mouseout="stopSlider = false">
        <ReservationItem v-if="Object.keys(consultations).length" :consultation="consultation"
                    :is_active="consultationIsActive()"/>
    </div>
</div>
<div class="dot-wrapper" v-if="Object.keys(consultations).length > 1">
    <span class="dot" v-for="i in paged" :key="i" @click="currentSlide(i)"></span>  
</div>

以下是JS代码：

components: {
    Notice,
    ConsultationBox,
    Pagination,
    ReservationItem,
    AdvisorItem
},
layout: "sidebar",
mounted() {
    this.handleAutomaticeButtonEnable();
    this.showSlides(this.slideIndex); 
},
data() {
    return {
        activePage: 1,
        consultations: {...this.getConsultations} || {},
        slideIndex: 0,
        stopSlider : false,
    };
},
methods: {
    currentSlide(n) {
        this.showSlides(this.slideIndex = n);
    },
    showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("dot");
        if(slides.length) {
            if (n > slides.length) {
                this.slideIndex = 1
            }    
            if (n < 1) {
                this.slideIndex = slides.length
            }
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";  
            }
            for (i = 0; i < dots.length; i++) {
                dots[i].className = dots[i].className.replace(" active", "");
            }
            slides[this.slideIndex-1].style.display = "block";  
            dots[this.slideIndex-1].className += " active";
        }
        
    },
}

组件：{
注意，
咨询箱，
标页码
保留条款，
忠告
},
布局：“侧边栏”，
安装的（）{
此.handleAutomaticeButtonEnable（）；
this.showSlides（this.slideIndex）；
},
数据（）{
返回{
活动页面：1，
协商：{……this.getConsultations}|{}，
幻灯片索引：0，
停止滑块：错误，
};
},
方法：{
当前幻灯片（n）{
this.showSlides（this.slideIndex=n）；
},
放映幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“dot”）；
如果（幻灯片长度）{
如果（n>幻灯片长度）{
this.slideIndex=1
}    
if（n<1）{
this.slideIndex=slides.length
}
对于（i=0；i

现在，我有两个问题：

在第一页加载时，滑块不工作。我必须单击点来启动滑块。我需要在页面加载时启动滑块

我如何使这个滑块到滑块并停在悬停状态

注意：我正在学习Vue的新功能