【Vue.js】vue-image-lightboxを用いて、画面に配置されている画像をギャラリー表示する方法

概要

閲覧いただきありがとうございます。
現在、vue-image-lightboxを用いてギャラリー表示を実装しています。
他ブログなどみながらインストールが完了しました。
インストールはできたのですが、私が本当にしたい動きである、画面上表示されている画像をギャラリー表示する方法がわからず、詰まってしまいました。

詳細

現状のコードは以下のとおりです。

目指している動きは、
figureタグで囲まれた2枚の画像をギャラリーに表示させることです。
(scriptタグ内のmediaはサンプルでデータをいれているだけです)

Show.vue

<template>
  <div>
    <figure>
      <a class="img-box" href="" data-lightbox="image" data-title="#">
        <img
            :src="#"
            :alt="#"
        >
      </a>
      <figcaption class="mt-3">test1</figcaption>
    </figure>

    <figure>
      <a class="img-box" href="" data-lightbox="image" data-title="#">
        <img
            :src="#"
            :alt="#"
        >
      </a>
      <figcaption class="mt-3">test2</figcaption>
    </figure>
    <ImageLightBox :media="media" ref="lightbox" :show-light-box="false" :show-caption="true"></ImageLightBox>
  </div>
</template>
<script>
import ImageLightBox from 'vue-image-lightbox';

require("vue-image-lightbox/dist/vue-image-lightbox.min.css");

export default {
  name: 'lightbox',
  components: {
    ImageLightBox,
  },

  data() {
    return {
      media: [
        {
          thumb: 'https://www.pakutaso.com/shared/img/thumb/YAMAhokkaido015_TP_V.jpg',
          src: 'https://www.pakutaso.com/shared/img/thumb/YAMAhokkaido015_TP_V.jpg',
        },
        {
          thumb: 'https://www.pakutaso.com/shared/img/thumb/YAMAhokkaido032_TP_V.jpg',
          src: 'https://www.pakutaso.com/shared/img/thumb/YAMAhokkaido032_TP_V.jpg',
        },
        {
          thumb: 'https://www.pakutaso.com/shared/img/thumb/KMKC428D354_TP_V.jpg',
          src: 'https://www.pakutaso.com/shared/img/thumb/KMKC428D354_TP_V.jpg',
        }
      ],
    }
  }
}
</script>