How to stop draggable when inside of the draggable clicked

Question

I have draggable and there are nested items inside of it. So it is something like this:

    <template>
        <draggable v-model="element" :move="handleMove" v-bind="dragOptions" :disabled="enableDrag">
            <transition-group>
                <NestedItems
                    v-for="(element, index) in elements"
                />
            </transition-group>
        </draggable>
    </template>
<script>

    export default {
        data() {
            return {
                enableDrag: false,
            };
        },
        methods: {
            handleToggleButton(buttonClicked) {
                buttonClicked ? this.enableDrag = true : this.enableDrag = false;
            },
        },
    };
    </script>

So here is my NestedItems component which includes Element component:

  <div>
    <Element
      @toggle-button-clicked="handleToggleButton"
    />
    <draggable
      v-if="(isOpen || (isOpen && isAllOpen)) && element.childElements && element.childElements.data"
      v-model="element.childElements.data"
      v-bind="dragOptions"
      class="child-elements-container"
      :move="handleMove"
    >
      <transition-group>
        <NestedPlanElement
          v-for="(childElement, index) in element.childElements.data"
        />
      </transition-group>
    </draggable>
  </div>
</template>

<script>
export default {
  name: "NestedItems",
  data() {
    return {
      dragOptions: {
        group: "plan-elements",
        animation: 150,
        ghostClass: "ghost",
        forceFallback: true,
        fallbackOnBody: true,
        chosenClass: "dragging",
        pull: "clone",
      },
    };
  },
  computed: {
    hasChildElement() {
      if (this.element.childElements) {
        return this.element.childElements.data.length ? true : false;
      }
    },
  },
  methods: {
    handleToggleButton(buttonClicked) {
      this.$emit("toggle-button-clicked", buttonClicked);
    },
  },
};
</script>

and finally here is my Element component:

<template>
    <div>
            <button v-if="hasChild" class="flex-secondary-button acccordion-button" @click="toggleAccordion">
                <i :class="['fa', 'fa-chevron-right', {'rotate-90': isAccordionOpen}]"></i>
            </button>
        </div>
</template>
<script>
export default {
    methods: {
        toggleAccordion() {
            this.isAccordionOpen = !this.isAccordionOpen;
            this.$emit("toggle-accordion", this.isAccordionOpen);
            this.$emit("toggle-button-clicked", true);
        },
    },
};
</script>

as you see there is a button in the Element component, so what's wrong is, that it is hard to click on this button because of draggable. So I want to make draggable disabled only when the button is clicked. Currently, when I click the button, I do it but the draggable is disabled permanently. So I want to make draggable disabled only when the button is clicked.