Modals in Custom Components result in a Black Screen

I am not sure if this is a Bootstrap-Limitation or a BootstrapVue-Issue:

I have globally included Bootstrap-Vue so it is working in all custom Components. I added this Code from the Doc to the Custom Component:

<b-button v-b-modal.modal-1>Launch demo modal</b-button>
<b-modal id="modal-1" title="BootstrapVue">
    <p class="my-4">Hello from modal!</p>
</b-modal>

Pressing the Button results in a Black Screen and Chrome goes to 100% CPU usage.

As soon as i copy the

<b-modal>

to the end of the Template in App.vue everything works fine. I think i once had this Issue in Vanilla Bootstrap. Though, if i inspect the Code the Modal is injected at the right Place of the DOM !?

[gmuehl]

Nope, it’s not the Backdrop, there is no Opacity on it. The screen is really dark black.

[tmorehouse]

Modal IDs must be unique in the same document.

You can do this with the latest version of Vue:

<template>
  <div>
    <b-button v-b-modal.[modalIid]>Launch demo modal</b-button>
    <b-modal :id="modalId" title="BootstrapVue">
      <p class="my-4">Hello from modal!</p>
    </b-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      modalId: 'modal'
    }
  },
  beforeMount() {
    // use this component's unique client-side Vue ID
    this.modalId = `modal-${this._uid}`
  }
}
</script>