---

**[Edit]:**
I ended up just using Vuex and it works fine with this method.

---

I am having trouble with catching an event.

If I look in the vue dev tools, the event is being emitted but the parent function is not being activated. I have this problem any time I try to use emit throughout this whole project. I am trying to avoid Vuex because this is a Vue/Inertia.js/Laravel stack with all login data and vars being passed from controllers and Laravel session, so I feel like adding Vuex would be redundant.

I'm sorry I can't post the full code because it is for work and I signed an NDA, but if more parts are needed I can provide snippets.

**PARENT** (`<Collection>`)

```
<CollectionFooter v-if="itemsSelected > 0"
:itemsSelected="itemsSelected" @modifySelected="modifyItemsSelected(operation)" />

```

```
data(){
  return {
    itemsSelected: 0
  }
},

```

```
methods: {
   modifyItemsSelected(operation){
      if(operation === "add") {
         this.itemsSelected += 1;
      } else {
         this.itemsSelected -= 1;
      }
      console.log(this.itemsSelected)
   }
},

```

**CHILD** (`<CollectionItemCard>`)

```
<button v-if="active" color="sm-white" @click="changeState">added</button>
<button v-else color="sm-yellow" @click="changeState">add</button>

```

```
methods:{
  changeState(){
    this.active = !this.active;
    let operation;

    if(this.active) {
      operation = "add";
    } else {
      operation = "remove";
    }
      this.$emit('modifySelected', operation);
    }
},

```

vue dev tools screen [![enter image description here](https://i.stack.imgur.com/e2yEY.png)](https://i.stack.imgur.com/e2yEY.png)