Communicate between sibling components in Vue

I had a situation where I had three instances of the same component, each mounted with a different value:

<Items type='new' />
<Items type='sold' />
<Items type='hidden' />

The Items component has a method that when called can affect sibling components. For example, if an item marked new is set to hidden, we need to update the current new Items component to remove it and also update the hidden Items component to show it.

Events are an ideal way to achieve this, but how do we dispatch an event to a sibling, rather than a parent-child relationship? Easy:

In the update method emit an event on the root component:


And in the mounted() method of the Items component add the event handler:

mounted() {
  this.$root.$on('updateItems', (data) => {
    // reload contents