What problem does this feature solve?

The object syntax of the v-on directive is vital in achieving conditional binding of event listeners, as shown in the discussions at #7349.

<div v-on="{ mouseover: condition ? handler : null }">

However, the current object syntax does not allow modifiers.

This feature request suggest that we extend the object syntax in the following way to allow modifiers.

<div v-on="{ click: { left: { prevent: condition ? leftClickHandler : null } },  mouseover: { stop: mouseoverHandler } }">

The above example would conditionally install leftClickHandler on "click.left.prevent" and mouseoverHandler on "mouseover.stop".

The embedded object notation is also conceptually consistent with the dot-notation already adopted in both function and inline syntax.

What does the proposed API look like?

The proposed v-on object syntax would like like this, which is an extension of the current syntax.

<div v-on="{ click: { left: { prevent: condition ? leftClickHandler : null } },  mouseover: { stop: mouseoverHandler } }">