How to re initialize DataTable after re-render / update the component in livewire?

Hello guys when I open/close modal or even delete a record in the table the DataTable is not working.... You need to refresh the page first for the DataTable to work again.

This is my whole script... I think the problem is on how I register my table.. Not Sure..

<script>

//Contacts

$(document).ready(function() {
    $('#rolesTable').DataTable({
        "pagingType": "full_numbers",
        stateSave: true
    });
} );

window.livewire.on('closeRoleModal', () => {
    $('#roleModal').modal('hide');
});

window.livewire.on('openRoleModal', () => {
    $('#roleModal').modal('show');
 
});

//delete contact
window.addEventListener('swal:confirmRoleDelete', event => {
    swal.fire({
        title: event.detail.title,
        text: event.detail.text,
        icon: event.detail.icon,
        showCancelButton: event.detail.showCancelButton,
        confirmButtonColor: event.detail.confirmButtonColor,
        cancelButtonColor: event.detail.cancelButtonColor,
        confirmButtonText: event.detail.confirmButtonText,
    }).then((result) => {
    if (result.isConfirmed) {
        window.livewire.emit('deleteRole',event.detail.id)
        swal.fire(
        'Deleted!',
        'Your file has been deleted.',
        'success'
        )
    }
    });
});

//

</script>