Loading HTML via Ajax

Hello everyone,

I've got a dataset which I display as a table; currently, this table is plain HTML (Blade):

{!! Form::open(['route' => 'dataset.index', 'method' => 'GET']) !!}
<table>
    <thead>
        <tr class="pagination-row"><td colspan="4"><span class="pagination">{!! $entries->render() !!}</span></td></tr>
        <tr class="search-row"><td colspan="4"><input type="text" name="q" value="{{ request('q') }}"></td></tr>
        <tr>
            <th>Name</th>
            <th>Company</th>
            <th>Location</th>
            <th> </th>
        </tr>
    </thead>
    <tbody>
    @forelse ($entries as $entry)
    <tr>
        <td>{!! user_link($entry->checkedUser) !!}</td>
        <td>{!! company_link($entry->checkedUser->company) !!}</td>
        <td>{{ $entry->location }}</td>
        <td class="actions--row">
            @can('update', $entry)
            <a href="{{ route('attendances.edit', $entry) }}">Edit</a>
            @endcan
        </td>
    </tr>
    @empty
    <tr>
        <td class="entry__none-found" colspan="4">Nothing here yet...</td>
    </tr>
    @endforelse
    </tbody>
</table>
{!! Form::close() !!}

Everything works as expected :)

Now I want to use Ajax to update this table and use the pagination, search etc. Before knowing Vue.js, I used jQuery to make a get request and parsed the HTML into the tbody element like this:

var $form = $('#dataset');

$form.submit(function(event) {
    event.preventDefault();

    $.ajax({
        'data': $form.serialize(),
        'url': $form.attr('action'),
        'success': function(html) {
            // delete old pagination
            $form.find('.pagination', '.pagination-row').remove();
            // add new pagination
            $form.find('thead .pagination-row td')
                .append($(html).find('thead .pagination'));
            
            // delete old tbody
            $form.find('tbody').remove();
            // append new tbody
            $form.find('thead').after($(html).find('tbody'));
        }
    });
});

I don't want to use jQuery anymore, instead I would like to use Vue.js. But what is the best approach to accomplish this? Using v-model which is bound to a JSON-object (which is loaded via Ajax)? Then, I have to re-create Blade functionality in Vue (like the @can helpers or my custom HTML helpers like user_link() and company_link().

I think, it might be better in this situation to load the HTML directly in Vue and replace the existing tbody with the new one? Or is there any other/better solution to this?

If not, how can I bind the newly loaded HTML to the current tbody in Vue?

Thanks in advance :)