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

Question

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/app.js
Vue.component('modal-delete', require('./components/ModalDelete.vue'));
/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">×
</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>

Answer 1

You got two options here. First the one LakiGeri mentioned you put the button inside the vue-template.
The second way is you just calling the the blade.php and you call two templates. First the template with the button and the modal-delete call. And after this you $emit the function from the inside of the modal-delete template.
Vue.js emit events
I would suggest the second way because so you can reuse the modal-delete Template.
I show you one of my examples: create.blade.php
...
#section('content')
<p>Neues Raster anlegen</p>
<div class="col-md-12">
<gridunits></gridunits>
</div>
#endsection
Now calling the first template gridunits. Inside this i forward the methods for the emit-events remove and add to the second template.
<template>
...
<div class="form-group">
<gridunititems
v-for="gridunit in request.gridunits"
:key="gridunit.id"
:gridunit="gridunit"
#remove="removeGridUnit"
#add="addGridUnit"
>
</gridunititems>
</div>
...
</template>
<script>
...
methods: {
addGridUnit(id) {
//doing things
},
removeGridUnit(idToRemove) {
//doing things
},
...
</script>
Second template gridunititems
<template>
...
<div class="input-group-append">
<button type="button" class="btn btn-outline-success" #click.prevent="$emit('add',gridunit.id)">+</button>
</div>
<div class="input-group-append">
<button type="button" class="btn btn-outline-danger" #click.prevent="$emit('remove',gridunit.id)">-</button>
</div>
...
</template>
create.blade.php calling first template
gridunits.vue calling second template and methods in script
gridunitsitems.vue button who emitting event