Modals- Bootstrap-Vue

https://bootstrap-vue.github.io/docs/components/modals

HTML

<link rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/tether@latest/dist/js/tether.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<template>
  <div>
    <b-btn v-b-modal="'modal1'">Modal 1</b-btn>
    <b-modal id="modal1" title="Modal 1">
      <p class="my-4">{{ data1 }}</p>
    </b-modal>
    <b-btn v-b-modal="'modal2'">Modal 2</b-btn>
    <b-modal id="modal2" title="Modal 2">
      <p class="my-4">{{ data2 }}</p>
    </b-modal>
    <b-btn v-b-modal="'modal3'">Modal 3</b-btn>
    <b-modal id="modal3" title="Modal 3">
      <p class="my-4">{{ data3 }}</p>
    </b-modal>
  </div>
</template>

CSS

#app {
  padding: 20px;
  height: 300px;
}

JavaScript

export default {
  data () {
    return {
       data1: 'Data 1',
       data2: 'Data 2',
       data3: 'Data 3'
    }
  }
}