После установки бутстрапа модал - черный экран

Я привыкаю к ​​Vue, но до того, как я установил Bootstrap, мое модальное окно работало нормально. Теперь это черный экран. Также, когда у меня есть кнопка внутри div, кнопка не отображается. Когда я беру кнопку за пределы ее div, модальное окно даже не переключается.

вот компонент продуктов, в который я импортирую свой модал:

<template>
<div class = "products">
  <h1>All Products</h1>
  <div v-for = "product in products" class = "single-product">
    <h2 class = "title">{{product.title}} - ${{product.price}}</h2>
    <img class = "images" :src = "product.photo_url"></img>
    <div class = "modal">
      <button
        type = "button"
        class = "btn btn-primary"
        @click = "showModal"
      >
        Show Product Info
      </button>

      <modal
        v-show = "isModalVisible"
        @close = "closeModal"
      />
    </div>

  </div>
</div>
</template>

<script>
//imports
import Vue from 'vue'
import Modal from './Modal.vue'
//import so I can use vue resource for an http request
import VueResource from 'vue-resource'
Vue.use(VueResource)

export default {
  components: {
    'modal': Modal
  },

  data() {
    return {
      //empty products array to be filled after get request
      products: [],
      //set modal visibility to false by default
      isModalVisible: false,
    }
  },

  methods: {
    //show modal when user clicks view product info
    showModal() {
      this.isModalVisible = true;
    },
    closeModal() {
      //close modal when user clicks the close button inside the modal
      this.isModalVisible = false;
    }

  },

  //request to retrieve all products from API using Created
  created() {
    //http request using vue resource from dependencies
    this.$http.get('https://tap-on-it-exercise-backend.herokuapp.com/products').then(function(data) {
      //fill products array by grabbing the data, slicing ot, then setting it to products array
      this.products = data.body.slice(0, data.body.length)
    })
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.images {
  width: 100px;
  height: 100px;
}
</style>

Вот мой модальный компонент, который экспортируется, а затем импортируется в компонент продуктов:

<script>
export default {
  name: 'Modal',
  methods: {
    close() {
      this.$emit('close');
    },
  },
};
</script>
<template>
<transition name = "modal-fade">
  <div class = "modal-backdrop">
    <div class = "modal" role = "dialog" aria-labelledby = "productTitle" aria-describedby = "productDescription">
      <header class = "modal-header" id = "productTitle">
        <slot name = "header">
          Product Title
        </slot>
      </header>

      <section class = "product-photo" id = "productPhoto">
        <slot name = "photo">
          Product Photo
        </slot>
      </section>

      <section class = "product-description" id = "productDescription">
        <slot name = "body">
          Product Description
        </slot>
      </section>
      <footer class = "modal-footer">
        <slot name = "footer">

          <button type = "button" class = "btn-green" aria-label = "Close modal">
            Like
          </button>

          <button type = "button" class = "btn-green" @click = "close" aria-label = "Close modal">
            Close
          </button>
        </slot>
      </footer>
    </div>
  </div>
</transition>
</template>
<style>
.modal-backdrop {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  background: #FFFFFF;
  box-shadow: 2px 2px 20px 1px;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
}

.modal-header,
.modal-footer {
  padding: 15px;
  display: flex;
}

.modal-header {
  border-bottom: 1px solid #eeeeee;
  color: #4AAE9B;
  justify-content: space-between;
}

.modal-footer {
  border-top: 1px solid #eeeeee;
  justify-content: flex-end;
}

.product-description {
  position: relative;
  padding: 20px 10px;
}

.btn-close {
  border: none;
  font-size: 20px;
  padding: 20px;
  cursor: pointer;
  font-weight: bold;
  color: #4AAE9B;
  background: transparent;
}

.btn-green {
  color: white;
  background: #4AAE9B;
  border: 1px solid #4AAE9B;
  border-radius: 2px;
}
</style>