如何将data-bs-slide的值动态更改为bootstrap 5和vue js 2

<!-- 引入Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<div id="app">
  <!-- 使用v-bind指令绑定data-bs-slide属性 -->
  <div
    id="carouselExampleIndicators"
    class="carousel slide"
    data-bs-ride="carousel"
    :data-bs-slide="currentSlide"
  >
    <!-- 轮播内容 -->
  </div>
  <!-- 控制按钮 -->
  <button @click="changeSlide('next')">Next</button>
  <button @click="changeSlide('prev')">Previous</button>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      // 初始时，设置当前幻灯片为第一个
      currentSlide: '0'
    },
    methods: {
      changeSlide(direction) {
        // 根据方向更改currentSlide的值
        if (direction === 'next') {
          this.currentSlide = parseInt(this.currentSlide) + 1;
        } else if (direction === 'prev') {
          this.currentSlide = parseInt(this.currentSlide) - 1;
        }
        // 确保currentSlide的值不会超出范围
        this.currentSlide = Math.max(0, Math.min(this.currentSlide, 9)); // 假设最多有10张幻灯片
      }
    }
  });
</script>