Vue.JS Emit Native DOM Events

I have a custom checkbox component, which is composed by a classic checkbox and a label. You are able to click either the checkbox or the label to toggle the state. I want to emit

Solution 1:

Events emitted by Vue do not bubble like native events do. You need to handle the emitted event right in the parent component or utilize state, as shown here: How to bubble events on a component subcomponent chain with Vue js 2?

You could either "bubble" the event using v-on handlers in every subsequent parent component, passing the event on "manually", use state via a bus as described in the source mentioned above or via vuex.

Using vanilla js would be a suboptimal solution here as you would need to set the event handler in the grandparent component directly, which would mean accessing a DOM element rendered in a child component. While this is possible, it creates interdependence among the components and should therefore be avoided when possible.