I am currently developing a Vue application where each route contains a table that pulls information from an API. The table is housed in a separate component and waits for an event from an eventBus to trigger a data refresh.
DataTable.vue
this.$bus.$on('reloadData', () => {
this.getRecords()
})
Route A
<datatable></datatable>
Route B
<datatable></datatable>
Inner Component of Route B
this.$bus.$emit('reloadData')
In my setup, the event is triggered from a modal component within Route B, but I have noticed that if I switch from Route A, C, or D to Route B, the event seems to be executed multiple times - once for each route visited before reaching Route B. This behavior gives the impression that components from other routes are active when they are not since I am only on Route B at the moment.