Catch Event from Dropdown component not working in Parent

Question

I am using this wonderful https://www.creative-tim.com/product/vue-black-dashboard-pro and their component Base-Dropdown has the following code:

<template>
  <component :is="tag"
             class="dropdown"
             :class="{show:isOpen}"
             @click="toggleDropDown"
             v-click-outside="closeDropDown">
    <slot name="title-container" :is-open="isOpen">
      <component
        :is="titleTag"
        class="dropdown-toggle btn-rotate"
        :class="titleClasses"
        :aria-expanded="isOpen"
        :aria-label="title || ariaLabel"
        data-toggle="dropdown">
        <slot name="title" :is-open="isOpen">
          <i :class="icon"></i>
          {{title}}
        </slot>
      </component>
    </slot>
    <ul class="dropdown-menu" :class="[{show:isOpen}, {'dropdown-menu-right': menuOnRight}, menuClasses]">
      <slot></slot>
    </ul>
  </component>
</template>
<script>
  export default {
    name: "base-dropdown",
    props: {
      tag: {
        type: String,
        default: "div",
        description: "Dropdown html tag (e.g div, ul etc)"
      },
      titleTag: {
        type: String,
        default: "button",
        description: "Dropdown title (toggle) html tag"
      },
      title: {
        type: String,
        description: "Dropdown title",

      },
      icon: {
        type: String,
        description: "Dropdown icon"
      },
      titleClasses: {
        type: [String, Object, Array],
        description: "Title css classes"
      },
      menuClasses: {
        type: [String, Object],
        description: "Menu css classes"
      },
      menuOnRight: {
        type: Boolean,
        description: "Whether menu should appear on the right"
      },
      ariaLabel: String
    },
    data() {
      return {
        isOpen: false
      };
    },
    methods: {
      toggleDropDown() {
        this.isOpen = !this.isOpen;
        this.$emit("change", this.isOpen);
      },
      closeDropDown() {
        this.isOpen = false;
        this.$emit('change', false);
      }
    }
  };
</script>

Now in another component, let's call it, "AddAccount.vue" I am using that Base-Dropdown component, but I can't seem to catch the 'change' event. I have tried everything.

 computed: {
    listeners() {
      return {
        ...this.$listeners,
        change: this.onChange,
      }
    }
  },
  methods: {
    onChange(evt) {
      console.log(":P:")
    },

or

  computed: {
    change(evt) {
      console.log(":P:")
    }
  },

or

  methods: {
    change(evt) {
      console.log(":P:")
    },

Nothing gets ever caught in that component, but if I do a breakpoint in the Base-Dropdown.vue, it is being caught...!