Pass data from child to parent in Vuejs (is it so complicated?)

You aren't listening to the event. I changed the event name to clicked-show-detail. Try this.

In the showDetailModal method of your component.

this.$emit('clicked-show-detail', product);

In your Vue.

<list-products :products="listProducts" @clicked-show-detail="clickedShowDetailModal"></list-products>

Example.

Props are for parent -> child

You can use $emit for child -> parent

v-on directive captures the child components events that is emitted by $emit

Child component triggers clicked event :

export default {
   methods: {
     onClickButton (event) {
         this.$emit('clicked', 'someValue')
     }
   }
}

---

Parent component receive clicked event:

<div>
    <child @clicked="onClickChild"></child>
</div>

...

export default {
  methods: {
      onClickChild (value) {
          console.log(value) // someValue
      }
  }
}