How can I make element draggable except the button

Question

I am using vue-draggable for my project. It is something similar like this.

    <draggable
                v-if="isOpen || (isOpen && isAllOpen)"
                v-model="element.childElements.data"
                v-bind="dragOptions"
                class="child-elements-container"
                handle=".handle"
            >
                    <div class="element">
            <Loading v-if="isLoading"> <i class="fas fa-spinner fa-spin"></i> Loading... </Loading>
            <div v-else class="element-details">
                <button v-if="hasChild" class="flex-secondary-button acccordion-button" @click="toggleAccordion">
                    <i :class="['fa', 'fa-chevron-right', {'rotate-90': isAccordionOpen}]"></i>
<div class="element-details-optional handle"></div>
                </button>
            </div>
        </div>
            </draggable>

Since I have added handle to element-details-optional class, in that part, draggable is possible. But what I want is plan-element has a handle but this button (<button v-if="hasChild" class="flex-secondary-button acccordion-button" @click="toggleAccordion"> ) doesnt. How can I achieve this?