【Vue.js】スライダーの画像を動的に変更したい

前提・実現したいこと

vue-image-lightboxで画像のスライダーを作成しています。
サーバーサイドからもらったデータによってスライダーの画像を動的に変更したい。

環境

Vue.js 2.6.10

発生している問題・エラーメッセージ

この3枚のいずれかの画像をクリックすれば、スライダー表示となりますが

しかし、下のように画像が表示されません
![]

そこで、chromeのdevツールのVueで中身をみてみると下記のとおり、undefinedになっております。だから、画像が表示されないのではないかと思っております。
![]

該当のソースコード

show.vue

<template>
  <div>

    <figure>
      <a class="img-box img320" @click.prevent.stop="show(0)">
        <img
            :src="challenge.post_main_image_url"
            :alt="post.post_main_image_filename">
      </a>
      <figcaption>{{ post.main_image_title }}</figcaption>
    </figure>
    <figure>
      <a class="img-box img320" @click.prevent.stop="show(1)">
        <img
            :src="post.post_sub1_image_url"
            :alt="post.post_sub2_image_filename"
        >
      </a>
      <figcaption>{{ post.sub1_image_title }}</figcaption>
    </figure>
    <figure>
      <a class="img-box img320" @click.prevent.stop="show(2)">
        <img
            :src="post.post_sub2_image_url"
            :alt="post.post_sub2_image_filename"
        >
      </a>
      <figcaption>{{ post.sub2_image_title }}</figcaption>
    </figure>

  </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 {
      post_id: this.$route.params.post_id,
      post: {},
      post_main_image_url: '',
      post_sub1_image_url: '',
      post_sub2_image_url: '',
      media: [
        {
          // src: "/uploads/1"とするとうまくいく
          thumb: this.post_main_image_url,
          src: this.post_main_image_url,
          id: 1
        },
        {
          thumb: this.post_sub1_image_url,
          src: this.post_sub1_image_url,
          id: 2
        },
        {
          thumb: this.post_sub2_image_url,
          src: this.post_sub2_image_url,
          id: 3
        }
      ],
    }
  },
  methods: {
    show: function (index) {
      this.$refs.lightbox.showImage(index)
    },

    getPost() {
      this.$loading.load(
          this.$auth.api.get(
              'su/posts/' + this.post_id, {
                params: {}
              }
          ).then(res => {
            this.post = res.data.post;

            this.post_main_image_url = res.data.post.post_main_image_url;
            this.post_sub1_image_url = res.data.post.post_sub1_image_url;
            this.post_sub2_image_url = res.data.post.post_sub2_image_url;
            console.log(this.post_main_image_url)
            console.log(this.post_sub1_image_url)
            console.log(this.post_sub2_image_url)
            // /uploads/1
          }).catch(err => {
            this.$errorHandlers.initial(err);
          })
      )
    },
  },
  created() {
    this.getPost();
  },

}

</script>