$emit not being caught by listener

I'm having an issue here that I can't seem to fix: I would like to have a simple toggle for a component using $emit

this is my index.vue :

    <div
      v-for="(filteredArticles, categoryKey) in groupedCategories"
      :key="categoryKey"
      class="l"
      @listen-button-event="toggle"
    >
      

  methods: {
    toggle () {
      alert('I did something')
      console.log('ping')
      this.isActive = !this.isActive
    }
  }

this is my component :

    <div
      :class="{ active: isActive }"
      @click="changeComponent()"
    >
      <a>{{ title }}</a>
    </div>

  data () {
    return {
      isActive: false
    }
  },
  methods: {
    changeComponent () {
      this.$emit('listenButtonEvent')
    }
  }

Doesn't seem to do anything...