Как лучше всего использовать реквизит для динамического именования идентификатора div и кнопки data-bs-target в Vue.js и Bootstrap 5?

Как назвать идентификатор div с параметром, переданным в качестве реквизита

Я пытаюсь назвать идентификатор div и data-bs-target кнопки с именем, переданным в качестве реквизита, чтобы я мог использовать один и тот же компонент несколько раз на одной странице с разными идентификаторами. Поскольку они являются кнопками и имеют общий идентификатор, даже если я нажимаю разные кнопки, всегда нажимается первая кнопка, потому что все они имеют одинаковый идентификатор.

Класс RestauranteCard.vue HTML

      <div
          v-if="!noimage"
          id=carouselNumber
          class="carousel slide"
          data-bs-ride="carousel"
          data-interval="false"
      >
        <div class="carousel-inner">
          <div
              v-for="(link, idx) in imagenesLink"
              :key="link"
              class="carousel-item"
              :class="{ active: idx === 0 }"
          >
            <img :src="link" class="d-block w-100" alt="foto" />
          </div>
        </div>
        <button
            class="carousel-control-prev"
            type="button"
            data-bs-target=#carouselNumber
            data-bs-slide="prev"
        >
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button
            class="carousel-control-next"
            type="button"
            data-bs-target=#carouselNumber
            data-bs-slide="next"
        >
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>

JS

  props: {
    restaurante: {
      type: Object,
      required: true,
    },
    carouselNumber: {
      type: String
    }
  },

Класс, вызывающий RestaurantCard

      <div v-else
          class="card row-cols-1"
          v-for="restaurante in restaurantes"
          :key="restaurante.id"
      >
        <RestauranteCard :restaurante="restaurante" :carouselNumber="restaurante.id"></RestauranteCard>
      </div>