Vue.js 3 this.$root.$on is not a function

According to this RFC in Vue.js 3 they removed $on, $once and $off instance methods :

Their motivation :

Vue 1.x implemented the component event system similar to that of AngularJS, with $dispatch and $broadcast where components in a tree can communicate by sending events up and down the tree.In Vue 2, we removed $dispatch and $broadcast in favor of a more state-driven data flow (props down, events up).With Vue 2's API, $emit can be used to trigger event handlers declaratively attached by a parent component (in templates or render functions), but can also be used to trigger handlers attached imperatively via the event emitter API ($on, $off and $once). This is in fact an overload: the full event emitter API isn't a part of the typical inter-component data-flow. They are rarely used, and there are really no strong reason for them to be exposed via component instances. This RFC therefore proposes to remove the $on, $off and $once instance methods

In a Vue 3 you can use an external library for this: https://v3.vuejs.org/guide/migration/events-api.html#_2-x-syntax

There's no $root space anymore in a Vue 3, so you have to use an event bus pattern with the libraries mentioned in the docs.