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

Question

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

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

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

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

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

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

Спасибо!

Клинок.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>