Laravel + Vue : method written in vue modal template not defined

I am working on the CRUD part of a Laravel app.

It is supposed that when the delete button of an entry is clicked, a modal show up and ask user to confirm delete the corresponding entry or not.

I tried to do this but it said the method written in vue modal template is not defined in the JS console of chrome browser when I clicked the button.

Sure I have defined it. Why does this happen and how to fix it?

If there is any similar example that demonstrate how to do it in vue, please provide the link. Thanks!

This is the structure of my frontend code.

The blade.php

<button id="show-modal" class="btn btn-danger"
@click="triggerDeleteModal($project)">
delete</button>
<modal-delete></modal-delete>

/resources/js/components/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" data-dismiss="modal">
       Close</button>
      <button type="button" class="btn btn-primary">Save</button>
    </div>
  </div>
</div>
</div>
</template>

<script>
export default {
props: ['project'],
methods: {
  triggerDeleteModal(project) {
    alert('Did something!' + project + " - project : " + this.project);
  }
 }
}
</script>

via Chebli Mohamed