Pass value from a VueJs component to a specific component in the Laravel blade, having more than one of the same component of the screen

Talk to me, I have a tremendous doubt.

I have in my blade in Laravel the contents of components that I created, like this:

//um select personalizado
<select-component></select-component>
//tabela com categorias
<data-table-component :id="tabelacateg" ></data-table-component>
//tabela com produtos
<data-table-component :id="tabelaprod" ></data-table-component>

I'm using the same component for different content, passed via props.

The difficulty I am facing is to pass a value from <select-component> to only "tabelacateg".

I was able to send it like this:

app.js:
export const serverBus = new Vue();



DataTableComponent.vue:
import { serverBus } from '../app'
...
created() {
serverBus.$on('populateComponent', (val) => {
this.dataTable = val;
})



SelectComponent.vue:
import { serverBus } from '../app'
//ao alterar o valor do select em faço essa chamada:
serverBus.$emit('populateComponent', sel);

The problem is that when I send $emit('populateComponent') updating the contents of the two components on the page, and I wanted it to change the values of the specific component only, in this case the tabelacateg.

How do I do this? Or will I have to create another component to address this problem?