title: Laravel + Vue : method written in vue modal template not defined
body: <p>I am working on the CRUD part of a Laravel app. </p>
  
  <p>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. </p>
  
  <p>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.</p>
  
  <p>Sure I have defined it. Why does this happen and how to fix it?</p>
  
  <p>If there is any similar example that demonstrate how to do it in vue,
  please provide the link. Thanks!</p>
  
  <p>This is the structure of my frontend code.</p>
  
  <p>The blade.php</p>
  
  <pre><code>&lt;button id="show-modal" class="btn btn-danger"
  @click="triggerDeleteModal($project)"&gt;
  delete&lt;/button&gt;
  &lt;modal-delete&gt;&lt;/modal-delete&gt;
  </code></pre>
  
  <p>/resources/js/app.js</p>
  
  <pre><code>Vue.component('modal-delete', require('./components/ModalDelete.vue'));
  </code></pre>
  
  <p>/resources/js/components/ModalDelete.vue</p>
  
  <pre><code>&lt;template&gt;
  &lt;div class="modal fade" tabindex="-1" 
  role="dialog" aria-labelledby="myLargeModalLabel"&gt;
      &lt;div class="modal-dialog modal-lg" role="document"&gt;
          &lt;div class="modal-header"&gt;
            &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;
            &lt;/button&gt;
            &lt;h4 class="modal-title"&gt;Modal Header&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
        &lt;p&gt;Some text in the modal.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
        &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;
         Close&lt;/button&gt;
        &lt;button type="button" class="btn btn-primary"&gt;Save&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
  props: ['project'],
  methods: {
    triggerDeleteModal(project) {
      alert('Did something!' + project + " - project : " + this.project);
    }
   }
  }
  &lt;/script&gt;
  </code></pre>