nuxtでキャプション付き画像を横に並べる方法

やりたいこと

動的にいくつ並ぶかわからない画像+キャプション(画像タイトルなど)をnuxtで表示したい

こんな感じに

結論

nuxt.js

<figure
  v-for="(file, index) in formData.files"
  :key="index"
  class="row-3 col-3 figure"
>
  <img
    class="rounded-1 w-100 mt-3"
    :src="images[index]"
    alt=""
    data-bs-target="#image-window-modal"
    data-bs-toggle="modal"
    @click="imageClick(index)"
  />
  <h6 data-dz-name="data-dz-name">
    {{ file.name }}
  </h6>
  <div class="d-flex align-items-center">
    <p
      class="mb-0 fs--1 text-400 lh-1"
      data-dz-size="data-dz-size"
    >
      {{ file.size.toLocaleString() }} Byte
    </p>
  </div>
  <div class="dropdown font-sans-serif">
    <button
      class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal dropdown-caret-none"
      type="button"
      data-bs-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded="false"
    >
      <span class="fas fa-ellipsis-h"></span>
    </button>
    <div class="dropdown-menu border py-2">
      <a
        class="dropdown-item"
        href="#!"
        data-dz-remove="data-dz-remove"
        @click="onRemoveFile(file.name)"
      >Remove File</a>
    </div>
  </div>
</figure>

これでいけます。