Observe to some event from another component in Vue

I have two components:

<div>
    <advertiser-add-component></advertiser-add-component>
    <advertisers-component></advertisers-component>
</div>

These components have the following interface:

First component is a button. I will see a modal dialog when I click on it. The modal contains an Ajax form:

Second component is a table. You already saw it on the first picture So, I would like to rerender the table component after sending the form without page refreshing. Is there some way to “subscribe” to this event (once the modal information is sent) from advertisers-component? How I can organize it with minimum code?

Answer

Yes absolutely, for something like this you could spin up a simple event bus, your component would emit an update to the bus, and the other watches for updates to that event type on the bus.

Here’s a good example of how to do it:

https://alligator.io/vuejs/global-event-bus/