使用不与Vuejs一起使用的自定义导航实现css轮播

Question

我已经在Materializecss工作了一段时间，我创建了带有自定义导航箭头的轮播视图，就像bootstrap一样。我使用Vuejs初始化轮播并且它有效。但是我在幻灯片之间导航时遇到问题。按下导航箭头，幻灯片应按照Docs移动，但由于某些原因它不起作用。请赐教。

      <div id="main" class="container-fluid" >
          <div class="carousel carousel-slider center" data-indicators="true">
          <div class="carousel-fixed-item  align-center" style="top:50%">
           <!-- <a class="btn waves-effect black white-text darken-text-5">button</a> -->
           <div class="left">
          <a href="prev" @click.prevent="prev" class="left "><i class="material-icons white-text waves-effect waves-light left medium" style="border-radius:50%">chevron_left</i></a>  
          </div>
          <div class="right">
              <a href="next" @click.prevent="next" class="right "><i style="border-radius:50%" class=" white-text material-icons  waves-effect waves-light right medium">chevron_right</i></a>  
              </div>
          </div>
          <div class="carousel-item red blue-text" href="#one!">
            <h2>First Panel</h2>
            <p class="blue-text">This is your first panel</p>
          </div>
          <div class="carousel-item amber blue-text" href="#two!">
            <h2>Second Panel</h2>
            <p class="blue-text">This is your second panel</p>
          </div>
          <div class="carousel-item green blue-text" href="#three!">
            <h2>Third Panel</h2>
            <p class="blue-text">This is your third panel</p>
          </div>
          <div class="carousel-item blue white-text" href="#four!">
            <h2>Fourth Panel</h2>
            <p class="blue-text">This is your fourth panel</p>
          </div>
        </div>
        </div>

这是我用于幻灯片的初始化和导航的脚本。

 let vue = new Vue({
  el:"#main",
  data:{
   message:'hello'
   },
   mounted()
   {

   $('.carousel.carousel-slider').carousel({fullWidth: true});

   },
   methods:{
   next()
   {
   alert('next'); // (*)

   $('carousel').carousel('next');
   },
   prev()
   {
   alert('prev');  // (**)
   $('carousel').carousel('prev');
   }
   }
   });

要检查工作情况，如果已经使用了这些警报声明（*），（**）。并且我很惊讶它成功地按下了箭头按钮，但幻灯片导航无法正常工作。请帮我解决我的问题。