Reorder Table Rows via Drag and Drop using Petite Vue?

Question

I am trying to add a drag and drop feature that reorders the rows of a table on my HTML/Javascript/CSS web application. I've gotten as far as adding the draggable="true" tag to the rows in the table, but since I am using Petite Vue as my progressive enhancement framework for my frontend I am having a hard time figuring out how to add this functionality to my code. Going the route of using JS event listeners does not seem like the best choice since I have already intertwined a lot of the table creation with Petite Vue features. Here is the HTML code for my table:

<table class="table table-hover align-middle" id="table">
    <thead>
        <tr class="table-primary">
            <th scope="col">Title</th>
            <th scope="col">Author</th>
            <th scope="col">Platform</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(item, i) in items" :key="items.length" draggable="true">
            <td scope="col" @click="onItem(i)">{{ items[i].title }}</td>
            <td scope="col">{{ items[i].author }}</td>
            <td class="text-center" v-if="items[i].platform === 'TikTok'" scope="col">
                <a v-bind:href="items[i].url" target="_blank" id="platform">
                    <img id="icon" src="assets/icons/tiktok_icon.webp" alt="tiktok_icon">
                </a>
            </td>
            <td class="text-center" v-else scope="col">
                <a v-bind:href="items[i].url" target="_blank" id="platform">
                    <img id="icon" src="assets/icons/youtube_icon.webp" alt="youtube_icon">
                </a>
            </td>
        </tr>
    </tbody>
</table>

The items variable that is referenced is a list of values to populate the table with that is pulled from a database specific to each user who accesses it. Any advice on how to best implement a reordering drag and drop feature on the table rows (<tr> tags) with Petite Vue, or with raw Javascript if not possible with Petite Vue?