Laravel + Vue: кнопка и модальный компонент не отображаются в лезвии

Я работаю над частью CRUD приложения Laravel.

Предполагается, что при нажатии кнопки удаления записи появляется модальное окно с просьбой подтвердить удаление соответствующей записи.

Я попытался сделать это, определив 2 отдельных компонента - кнопку удаления и модальное окно. Я поместил кнопку в отвал php.

Он просто не появился, но элемент есть в html-документе страницы, и ошибки нет.

Это мой код внешнего интерфейса.

Как заставить это появиться?

Спасибо!

Blade.php

<div id = "app">
    <btn-delete project = "{{ $project }}"></btn-delete>
</div>

app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('btn-delete', require('./components/BtnDelete.vue'));
Vue.component('modal-delete', require('./components/ModalDelete.vue'));

const app = new Vue({
    el: '#app'
});

BtnDelete.vue

<template>
    <div>
      <button class = "btn btn-danger" @click = "showDeleteModal">delete</button>
      <modal-delete v-if = "modal" @delete = "deleteItem" 
                                 @close = "closeDeleteModal"></modal-delete>
    </div>
</template>
<script>
  export default {
    data() {
      return {
         modal:false
      }
     },
    props: ['project'],
    methods: {
    showDeleteModal(){
        this.modal = true
     },
    closeDeleteModal(){
        this.modal = false
     },
     deleteItem() {
        alert("project : " + this.project);
     }
    }
  }
</script>

ModalDelete.vue

<template>
  <div class = "modal fade" tabindex = "-1" role = "dialog" 
    aria-labelledby = "myLargeModalLabel">
    <div class = "modal-dialog modal-lg" role = "document">
    <div class = "modal-header">
      <button type = "button" class = "close" data-dismiss = "modal">&times;</button>
      <h4 class = "modal-title">Modal Header</h4>
    </div>
    <div class = "modal-body">
      <p>Some text in the modal.</p>
    </div>
    <div class = "modal-footer">
      <button type = "button" class = "btn btn-default" 
           @click.prevent = "$emit('close')">Close</button>
      <button type = "button" class = "btn btn-primary" 
           @click.prevent = "$emit('delete')">Save</button>
    </div>
  </div>
</div>