Lightbox

When a clik inside a carousel libox image the image is displayed without resizing the screen and when I close the image is closes without resizing.

If I use an array for the props visible and index the behavior is as explainned above, but is the member of my array for those 2 properties are objects the the lightbox works fine. This behavior happens if I have several lightboxes. My code is as such:

<template>
<mdb-row style="margin-bottom: 16px;">
  <mdb-col col="12">
    <h3 style="margin-top:10px;font-weight: bold" class="grey-text">Fotos</h3>
  </mdb-col>
  <mdb-col col="12" style="margin-left:20px;font-size: 14px;margin-bottom:20px;">
    <mdb-carousel
      :interval="8000"
      showControls
      showIndicators
      multi
      slide
      top
      navClass="btn-primary"
      indicatorClass="primary-color"
    >
      <!-- PHOTOS PAGE -->
      <mdb-carousel-item
        v-for="(page, indexPage) in photos.thumbnails"
        :key="'photos-page-' + indexPage"
      >
        <mdb-row class="mdb-lightbox px-2">
          <!-- SINGLE PHOTO -->
          <mdb-col
            md="4"
            v-for="(image, indexImage) in page"
            :key="'photo' + indexPage + indexImage"
            class="d-xs-inline-block"
            @click.native="showLightbox(indexPage, indexImage)"
          >
            <figure>
              <img :src="image" class="img-fluid" alt />
            </figure>
          </mdb-col>
          <!-- /SINGLE PHOTO -->
        </mdb-row>
      </mdb-carousel-item>
      <!-- /PHOTOS PAGE -->
    </mdb-carousel>
    <mdb-lightbox
      v-for="(page, indexPage) in photos.thumbnails"
      :key="'lightbox-' + indexPage"
      :visible.sync="photos.visible[indexPage]"
      :imgs="photos.images[indexPage]"
      :index.sync="photos.indexes[indexPage]"
      :captions="photos.captions[indexPage]"
      @hide="handleHide(indexPage)"
    ></mdb-lightbox>
  </mdb-col>
</mdb-row>

<script>
import {
  mdbContainer,
  mdbView,
  mdbRow,
  mdbCol,
  mdbListGroup,
  mdbListGroupItem,
  mdbIcon,
  mdbCarousel,
  mdbAvatar,
  mdbCarouselItem,
  mdbCarouselCaption,
  mdbLightbox
} from "mdbvue";
import StarRating from "vue-star-rating";
import GoogleMapsLoader from "google-maps";
import { Carousel, Slide } from "vue-carousel";
import breakpoint from "vue-md-breakpoint";

export default {
  name: "Company",
  components: {
    mdbContainer,
    mdbView,
    mdbRow,
    mdbCol,
    mdbListGroup,
    mdbListGroupItem,
    mdbIcon,
    mdbCarousel,
    mdbCarouselItem,
    mdbCarouselCaption,
    mdbLightbox,
    mdbAvatar,
    StarRating,
    Carousel,
    Slide
  },
  data() {
    return {
      coordinates: {
        lat: -25.538383,
        lng: -49.20459
      },
      photos: {
        thumbnails: [
          [
            "https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(2).jpg",
            "https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(3).jpg",
            "https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(4).jpg"
          ],
          [
            "https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(5).jpg",
            "https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(6).jpg",
            "https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(7).jpg"
          ],
          [
            "https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(8).jpg"
          ]
        ],
        images: [
          [
            "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(2).jpg",
            "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(3).jpg",
            "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(4).jpg"
          ],
          [
            "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(5).jpg",
            "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(6).jpg",
            "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(7).jpg"
          ],
          [
            "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(8).jpg"
          ]
        ],
        captions: [
          [
            "Comantário da foto 1",
            "Comantário da foto 2",
            "Comantário da foto 3"
          ],
          [
            "Comantário da foto 4",
            "Comantário da foto 5",
            "Comantário da foto 6"
          ],
          ["Comantário da foto 7"]
        ],
        indexes: [0, 0, 0],
        visible: { "0": false, "1": false, "2": false }
      }
    };
  },
  methods: {
    showLightbox(page, photo) {
      this.photos.indexes[page] = photo;
      this.photos.visible[page + ""] = true;
    },
    handleHide(page) {
      this.photos.visible[page + ""] = false;
    }
  },
};

Now this code is workin beacuse I turned the elements of the visible property into an object instead of an array.