Нажатие кнопки не работает в Vue в datatable ajax рендере

Question

Я новичок ie в Vuejs.

У меня есть таблица пользователей, которая показывает данные с использованием обработки на стороне сервера в Datatable. Я пытаюсь добавить событие щелчка, которое вызовет функцию vue. Но функция щелчка не работает вообще. Я пытался использовать эти методы. Но никто из них не работает.

v-on: click = "functionName"

v-on: click = "$ emit ('functionName')"

@ click = "functionName "

HTML part

<table class="table table-bordered data-table dataTable-load">
   <thead class="thead-light">
      <tr>
         <th style="width: 80px;">No</th>
         <th>Name</th>
         <th>Email</th>
         <th>Phone</th>
         <th>Type</th>
         <th>Created</th>
         <th>Last Updated</th>
         <th width="280px">Action</th>
      </tr>
   </thead>
   <tbody></tbody>
</table>
<div>
  <span v-html='data'></span>
</div>

SCRIPT part

 var dt = $('.dataTable-load').DataTable({
      processing: true,
      serverSide: true,
      ajax: {
         url: "{{ url('user/getdata') }}",
         type: "post",
         data: {"_token": "{{ csrf_token() }}"}
      },
      columns: [
         {name: 'id', data: 'id', },
         {name: 'name', data: 'name'},
         {name: 'email', data: 'email'},
         {name: 'phone', data: 'phone'},
         {name: 'usertype', data: 'usertype',
            "render": function (data, type, row) {
               if (row.usertype == 'M') {
                  return 'Manager';
               } else {
                  return 'Staff';
               }
            }
         },
         {name: 'created_at', data: 'created_at'},
         {name: 'updated_at', data: 'updated_at'},
         {
            title: 'msg',
            "render": function (data, type, row) {
               return '<button v-on:click="showModal" @click="showModal">the button</button>';
            }
         }
      ]
   });
   dt.on('order.dt search.dt', function () {
      dt.column(0, {search: 'applied', order: 'applied'}).nodes().each(function (cell, i) {
         cell.innerHTML = i + 1;
      });
   }).draw();

Приложение . js

const app = new Vue({
   el: '#app',
   data: {
      data: '',
   }, 
   methods: {
      showModal() {
         this.data = 'Now click on me <a href=\'#\' @click.prevent=\'alert("yo")\'> here </a>';
      },
   },
});

Пожалуйста, дайте мне знать, как это сделать правильно. Заранее спасибо.