Using Ag-grid cell renderer with Mitt

[Dhaxor]

A cell renderer is just like a custom component in an ag-grid table which can be a button, badge, image in a table row. Now I'm using mitt to emit and event from the cell renderer and listening on the parent component when it's rendered. But the issue here is that the cell renderer is used in multiple components so when I listen on each component, they all run. How do I make it listen on just one component at a time.

Cell Renderer

	onChange(event: Event): void {
		this.$eventBus.emit('switchBoxChanged',
			{
				event,
				params: this.params,
			});
	 }

Parent Component

  mounted() {
  	switchBoxChanged(): void {
		this.$eventBus.on('switchBoxChanged',
			(data: SwitchDataType) => {
					httpClient
						.post('/api/data',
							{
								...data,
							})
					}}
  
  }

Another Parent component

mounted() {
  	switchBoxChanged(): void {
		this.$eventBus.on('switchBoxChanged',
			(data: SwitchDataType) => {
					httpClient
						.post('/api/data',
							{
								...data,
							})
					}}
  
  }

Since it's used in multiple components, then when one parent component runs, the other runs too

[Dhaxor]

I found the issue. I initialized the event Bus on a global scope. so i had to change that.