Bootstrap 3 Modal doesnt show with vue 2

I am using vue2 and bootstrap 3 and I want to display a modal containing a form. I have the following code in my UsersPage.vue

<b-btn variant="primary" @click="displayAddUser" >
  Add user
</b-btn>

<!-- Modal Component -->
<b-modal id="editModal" :title="editModalTitle" :visible="displayEditModal">
  <form @submit.stop.prevent="submit">
    <div class="form-group">
      <b-form-input type="text" placeholder="Enter name" v-model="user.name"/>
    </div>
  </form>
</b-modal>

In my <script> section I have this:

<script>
  export default {
    data: () => ({
      displayEditModal: false,
      editModalTitle: 'Add user'
    }),
    methods: {
      displayAddUser() {
        this.displayEditModal = true
        this.editModalTitle = 'Add user'
      },
    ... rest of the code

I have also tried using this button with v-b-modal:

 <b-btn v-b-modal.editModal>Open</b-btn>

That didn't work either. I tried vue strap. That worked however when the modal closed I got an error saying something about two-way binding not working any more in vue2. I left react because that was the most impossible piece of software I have ever used and I thought vuejs would be simpler.

How can I get a simple modal or b-modal to show???

Update:

I think I have discovered a bug in vue2 or bootstrap. When I put this in my styling then the modal shows:

.modal-open {
  opacity: 0.6 !important;
}

.modal-open .modal {
  opacity: 0.9 !important;
}