How to change content of vue.js modal window?

Question

Vue.js

There are more than 10 buttons on one page that open a modal window, how to make one container for all?
I use the vue-js-modal plugin, here is the code below, so as not to repeat it 10 times. Change pictures in the slider, Title, description, and additional information. in accordion.

<modal name="modal-1" width="720" height="auto" :scrollable="true">
    <swiper :options="swiperOption" ref="mySwiper">
      <!-- slides -->
      <swiper-slide><img :src="slider1.img1" alt=""></swiper-slide>
      <swiper-slide><img :src="slider1.img1" alt=""></swiper-slide>
      <swiper-slide><img :src="slider1.img1" alt=""></swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-button-prev" slot="button-prev"><i class="fa fa-angle-left" aria-hidden="true"></i>
      </div>
      <div class="swiper-button-next" slot="button-next"><i class="fa fa-angle-right" aria-hidden="true"></i>
      </div>
    </swiper>

    <div class="modal-animal-content">
      <h3 class="title-modal">Заголовок)</h3>
      <div class="desc-modal">
      <p>описание</p>
      </div>

      <badger-accordion :options="{openMultiplePanels: true}">
        <badger-accordion-item>
          <template slot="header">First Accordion Header</template>
          <template slot="content">First Accordion Content</template>
        </badger-accordion-item>

        <badger-accordion-item>
          <template slot="header">Second Accordion Header</template>
          <template slot="content">Second Accordion Content</template>
        </badger-accordion-item>

        <badger-accordion-item>
          <template slot="header">Третий Accordion Header</template>
          <template slot="content">Четвертыйы Accordion Content</template>
        </badger-accordion-item>

        <badger-accordion-item>
          <template slot="header">Четвертый Accordion Header</template>
          <template slot="content">Четвертый Accordion Content</template>
        </badger-accordion-item>

      </badger-accordion>

      <a class="read-in-ource" href="#">Читать в источнике</a>
    </div>

    <button class="close-modal" @click="$modal.hide('modal-1')">X</button>
  </modal>

and with this button I call the window

<button @click="$modal.show('modal-1')">опен</button>

I have an idea of ​​what I need, but I can't figure out how to do it

Answer 1

So take out all the data of the mapped windows into a separate variable and just change it

Answer 2

It is possible to pass an object through props