Custom Nova Field, prevent "click" from going to detail view

I'm working on a customized fork of the (Nova-Order-Field package)[https://github.com/michielkempen/nova-order-field] and I'm running into an issue where when clicking on the icon, Nova loads the resource detail page instead of running the method defined in the @click().

<template>
    <div v-if="this.field.cantEdit">
        <div :class="`text-${field.textAlign}`">
            <span>{{ field.value }}</span>
        </div>
    </div>
    <div
        v-else
        :class="`text-${field.textAlign}`">
        <!-- Down button -->
        <button
            v-if="!field.last"
            @click="reorderResource('down')"
            class="reorder-icon"
        >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                 stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round"
                      d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z"/>
            </svg>
        </button>
        <!-- Up button -->
        <button
            v-if="!field.first"
            @click="reorderResource('up')"
            class="reorder-icon"
        >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                 stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round"
                      d="M9 11l3-3m0 0l3 3m-3-3v8m0-13a9 9 0 110 18 9 9 0 010-18z"/>
            </svg>
        </button>
    </div>
</template>

<script>
export default {
    props: ['resourceName', 'field'],

    computed: {
        resourceId() {
            return this.$parent.resource.id.value;
        },
        parentList() {
            return this.$parent.$parent.$parent.$parent.$parent.$parent;
        }
    },
    methods: {
        reorderResource(direction) {
            console.log(direction);
            return;
        }
    }
}
</script>

<style scoped>
.reorder-icon {
    cursor: pointer;
    color: #a0aec0;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    outline: none;
}

.reorder-icon:hover {
    color: #43505d;
}

</style>

I have tried replacing the <button> element with an anchor <a href="#"> element but that also does not work.

In the above code, the console.log does display the 'down' or 'up' text, but then Nova takes me straight to the detail page, and I don't know how to prevent that.

Any idea how to prevent Nova from going to the detail page when these buttons are clicked?