Materializecss Slider: Pause on Mouseenter and Mouse Leave Not Working

Hi I created a vue component "Testimonial Slider" in javascript, the slider works fine hover I want to implement a pause on mouseover effect. Unfortunately materializecss the responsive css framework am working with has no support for this yet. So I research and came across a solution but it was in jquery which I then tried converting to javascript. Now I don't know where each script belong. Also I need to implemnt the pause on mouseover and play on mouseleave effect so kindly as assist me. All my code are below Thanks . My Working Testimonial component:

<template>
  <div class="slider row m-auto margin top-80 d-flex ">
    <div class="slides">
      <li
        v-for="testimonial in testimonial_data.testimonials"
        :key="testimonial"
      >
        <div class="col s12 m2 valign-wrapper client-img">
          <img
            class="w-100 responsive-img circle fadeimg"
            src="@/assets/images/ico/userico.png"
          />
        </div>
        <div class="col s12 m10 left-align m-auto">
          <p
            v-html="`${testimonial.content}`"
            class="card-content left-align"
          ></p>
          <div class="">
            <!-- <div class="col s4 m-client-img">
              <img
                class="client-img responsive-img circle"
                src="@/assets/images/user.png"
              />
            </div> -->
            <div class="">
              <p>{{ testimonial.author }},</p>
              <b>{{ testimonial.title }}, {{ testimonial.company }}</b>
            </div>
          </div>
        </div>
      </li>
    </div>
  </div>
</template>

<script>
import M from "materialize-css";
// import { mapGetters } from "vuex";

export default {
  name: "Testimonials",
  data() {
    return {
      //  testimonial_data: [],
      hover: false
    };
  },
  props: {
    testimonial_data: {
      type: Array,
      required: true,
    },
    author: String,
    company: String,
    content: String,
    title: String,
  },
  methods: {
    startSlider() {
      var elems = document.querySelectorAll(".slider");
      M.Slider.init(elems, {
        indicators: false,
        height: 400,
        transition: 500,
        interval: 5000,
        //new changes to carousel
        duration: 3,
        // ease: "none",
        // paused: true,
        // repeat: -1,

      });
    },

    // checkhoverstate(){z
    //   let hoverstate =  document.querySelectorAll(".slider");z
    // }

  },

  mounted() {
    setTimeout(() => {
      this.startSlider();
    }, 2000);
    
  },

  created(){
    
  }
};
</script>

<style scoped>
.slider .slides {
  margin: 0px;
  padding: 0px;
}

.m-client-img {
  display: none;
}

.fadeimg{
  margin-top: 3rem;
  opacity: 60%;
  transition: opacity 1s ease-in-out;
}

@media screen and (max-width: 480px) {
  .m-client-img {
    /* display: block; */
    width: 100px;
    height: 100px;
  }

  .client-img {
    display: none;
  }
}
</style>

The Jquery script I got Online:

 $(document).ready(function(){
       $('.slider').slider();
        var myVar;
       function start(){
         myVar = setInterval(next, 2500);
         function next() {
               document.querySelector('.slider').slider('next');
          }
       }        
             function pauseSlider() {
                       clearInterval(myVar);
            };
         $('.slides').mouseover(function(){ pauseSlider(); }),
         $('.slides').mouseleave(function(){ startSlider(); }),
         start();

My convertion of the Jquery Script to Javascript:

document.querySelector(document).ready(function(){
      document.querySelector('.slider').slider();
       var myVar;
      function start(){
        myVar = setInterval(next, 2500);
        function next() {
              document.querySelector('.slider').slider('next');
         }
}        
            function pauseSlider() {
                      clearInterval(myVar);
           };
         document.querySelector('.slides').mouseover(function(){ pauseSlider(); }),
         document.querySelector('.slides').mouseleave(function(){ startSlider(); }),
    start();
});

coinversion 2

document.ready(function(){
       document.getElementByClassName("slider").slider();
        let myVar;
       function start(){
         myVar = setInterval(next, 2500);
         function next() {
               document.querySelector('.slider').slider('next');
          }
       }        
             function pauseSlider() {
                       clearInterval(myVar);
            };
         document.getElementByClassName("slides").mouseover(function(){ pauseSlider(); }),
         document.getElementByClassName("slides").mouseleave(function(){ startSlider(); }),
         start();

My new testimonialSlider for testing and my current arrangement of the converted code:

<template>
   <div class="slider row m-auto margin top-80 d-flex" @mouseover="myslider">
    <div class="slides">
      <li
        v-for="testimonial in testimonial_data.testimonials"
        :key="testimonial"
      >
        <div class="col s12 m2 valign-wrapper client-img">
          <img
            class="w-100 responsive-img circle fadeimg"
            src="@/assets/images/ico/userico.png"
          />
        </div>
        <div class="col s12 m10 left-align m-auto">
          <p
            v-html="`${testimonial.content}`"
            class="card-content left-align"
          ></p>
          <div class="">
            <!-- <div class="col s4 m-client-img">
              <img
                class="client-img responsive-img circle"
                src="@/assets/images/user.png"
              />
            </div> -->
            <div class="">
              <p>{{ testimonial.author }},</p>
              <b>{{ testimonial.title }}, {{ testimonial.company }}</b>
            </div>
          </div>
        </div>
      </li>
    </div>
  </div>
</template>

<script>
export default {
  name: "Testimonials",
  created() {},
  data() {
    return {};
  },
  props: {},
  methods: {
    var mySlider = document.querySelector(document).ready(function(){
      document.querySelector('.slider').slider();
       
       var mySlider;
      
            
         document.querySelector('.slides').mouseover({ pauseSlider(); }),
         document.querySelector('.slides').mouseleave({ startSlider(); }),
     
    });

    ///// This Function is in  JQuery for study purposes
    //     $(document).ready(function(){
    //   $('.slider').slider();
    //    var myVar;
    //   function start(){
    //     myVar = setInterval(next, 2500);
    //     function next() {
    //           document.querySelector('.slider').slider('next');
    //      }
    //   }        
    //         function pauseSlider() {
    //                   clearInterval(myVar);
    //        };
    //      $('.slides').mouseover(function(){ pauseSlider(); }),
    //      $('.slides').mouseleave(function(){ startSlider(); }),
    //     start();
    // });
  },
  function() {
    function start(){
        mySlider = setInterval(next, 2500);
        
        function next() {
              document.querySelector('.slider').slider('next');
         }
    } 

    function pauseSlider() {
        clearInterval(mySlider);
    };
  },
  watch: {
    // whenever Mouse Hovers Over Slider or leaves, this function will run
    start();
  },
};
</script>

<style lang="css" scoped></style>

Please kindly assist and advice iif my approach is wrong. Thanks again