How to make button functional in datatables

I render buttons in datatable but it is not functional

<DataTable 
              :data="facilities" 
              :columns="columns" 
              :options="dataTableOptions" 
              class="display">
              <thead>
                  <tr>
                      <th>Id</th>
                      <th>Title</th>
                      <th>Category</th>
                      <th>Action</th>
                  </tr>
              </thead>
              <tbody>
            
              </tbody>
          </DataTable>

data() {
    return {
      facilities: [],
      columns: [
        {data: 'id'},
        {data: 'title'},
        {data: 'category'},
        {
          data: null,
          render: function (data, type, row) {
            return `
                    <button class="btn btn-outline-warning" @click="viewFacility(${data.id})">View</button>
                   `;
          }
        }
      ],
      dataTableOptions: {
        order: [
          [0, 'desc']
        ]
      },
    };
  },
  mounted() {
    this.getFacilities();
  },
  methods:{
    viewFacility(id) {
      console.log(id);
      Swal.fire({
        title: 'Facilities: View Facility',
        html: `<h1>This is View</h1>`,
        showCancelButton: true,
        cancelButtonText: 'Close'
      });
    },

I also add consolelog in viewFacilities and it is not appearing in console.