How to make multiple sliders on one page (Vue, js)?

Question

JavaScript

Good afternoon!
I made a slider, everything works fine. If anyone needs a code please use it.
My question is this:
If there is only one slider, everything works,
I can’t understand how to make translate and slider_index as unique for each slider,
if there are a lot of sliders on the page?
Thanks

<template v-for="post in Sliders">
   <div class="relative">
       <div class="display-flex overflow-hidden relative">
           <template v-for="(carousel, index) in post.carousel_item">
               <template v-if="index === 0">
               <div class="slide display-flex justufy-content-center margin-bottom-1em margin-top-1em" :class="'slider' +  post.id" 
                                   :key="index" :style="'transform: translate(' + ((( index * 80  ) - 8) - translate) +  '%);'">
                    <div class="slider_img_block border-radius-15px relative overflow-hidden cursor-pointer">
                    <div>
                     <img class="slider_img width-100" :src="carousel.carousel_image_link">
                    </div>
                    </div>
                </div>
         </template>
         <template v-else>
             <div class="slide absolute display-flex justufy-content-center margin-bottom-1em margin-top-1em"  :class="'slider' +  
                  post.id" :key="index" :style="'transform: translate(' + ((( index * 80  ) - 8) - translate) +  '%);'">
             <div class="slider_img_block border-radius-15px relative overflow-hidden cursor-pointer">
             <div>
                 <img class="slider_img width-100" :src="carousel.carousel_image_link">
             </div>
         </div>
      </div>
     </template>
 </template>
</div>
<div class="absolute top-50_proc display-flex justufy-content-space-between padding-right-05em padding-left-05em width-100">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="white" class="bi bi-arrow-left-circle hide_btn" viewBox="0 0 16 16" :ref="'moveLeftBtn' + post.id"   @click="moveLeft(post.id)">
<path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-4.5-.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z"/>
</svg>
 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="white" class="bi bi-arrow-right-circle" viewBox="0 0 16 16" :ref="'moveRightBtn' + post.id"  @click="moveRight(post.id)">
<path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
</svg>
</div>
</div>
</template>

const app = new Vue({
            el: '#app',
            data: {
              Sliders: [],

                slider_index: 0,
                translate: 0,
           
},
 methods: {
    //Слайдер
                moveRight(id){
                   let slider = document.querySelectorAll(`.slider${id}`)
                   if(this.slider_index < (slider.length - 1)){
                         this.slider_index++
                         for (let i = 0; i < slider.length; i++){
                              slider[i].classList.add('absolute')
                           }
                           slider[this.slider_index].classList.remove('absolute')

                         if(slider[0]){this.translate += 72} else{this.translate += 80}
                          //скрываем левую кнопку
                         if(this.slider_index > 0){
                           this.$refs[`moveLeftBtn${id}`][0].classList.remove('hide_btn')}
                          //показываем правую кнопку
                         if(this.slider_index === (slider.length - 1)){
                           this.$refs[`moveRightBtn${id}`][0].classList.add('hide_btn')}
                   }
                 },
                 moveLeft(id){
                    if(this.slider_index > 0){
                         this.slider_index--
                         let slider = document.querySelectorAll(`.slider${id}`)
                             for (let i = 0; i < slider.length; i++){
                                  slider[i].classList.add('absolute')
                               }
                              slider[this.slider_index].classList.remove('absolute')

                              if(slider[0]){this.translate -= 72}
                              else{this.translate -= 80}
                        //скрываем левую кнопку
                        if(this.slider_index === 0){
                           this.$refs[`moveLeftBtn${id}`][0].classList.add('hide_btn')}
                        //показываем правую кнопку
                        if(this.slider_index < (slider.length - 1)){
                           this.$refs[`moveRightBtn${id}`][0].classList.remove('hide_btn')}
                    }
                 },

}