Vue image modal open on click

I'm working on a simple Vue app that has images that I would like to open in a bootsrap modal when clicked on.

I've been reading through various tutorials and solutions, but I still can't figure out how to finish off the modal. I have the images displaying, but I can't figure out how to get the image to show in a modal when clicking on it.

Here is what I have so far:

Vue component:

<template>
  <div class="row" v-if="othersImages">
      <div id="others-images" class="grid">
          <div class="grid-item" v-for="image in othersImages" :key="image.id">
              <h5></h5>
              <picture v-bind="'image' + image.id">
                <img v-bind:src="image.image.path" v-bind:alt="image.description" 
                @click="showModal"/>
              </picture>
          </div>
      </div>
      <div id="image-modal" class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-body">
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'othersImages',
  created() {
    this.fetchImages();
  },
  data() {
    return {
      apiRequest: new this.$request(),
      othersImages: [],
      errors: '',
    };
  },
  methods: {
    showModal() {
      // Not sure what to put here?
    }
  },
};
</script>

CSS:

#others-images{
    margin-bottom: 30px;
}
.modal-dialog{
    max-width: 75vw !important;
    .modal-content{
        background-color: transparent;
        border: none;
        border-radius: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        .modal-body{
            padding: 0;
            background-color: #fff;
            img{
                width: 100%;
                height: auto;
            }
            h5{
                color: $gold;
                font-weight: 700;
                margin-top: 15px;
                margin-left: 15px;
            }
            p{
                margin-top: 5px;
                margin-left: 15px;
            }
            .close{
                position: abs(absolute);
                border-bottom: none;
                border-top-left-radius: 0;
                border-top-right-radius: 0;
                right: 15px;
                bottom: 15px;
                color: $text_colour;
                text-shadow: none;
            }
        }
    }
}

from Recent Questions - Stack Overflow https://ift.tt/3vvq5L1
https://ift.tt/eA8V8J