How do I refresh a cell using Vue3 composition and child to child communication with AG-Grid

Question

Let's say I have two child components A and B

A has a button that should add a value to a grid select box column and B has the grid which has a vue select box for a column using

cellRenderer: 'tag-grid-select',

I want to be able to click on the button in A to refresh the select component in the grid in component B.

Note: This is not parent to child communication but child to child specifically using the Vue3 composition api and setup().

Answer 1

I was able to solve this using an eventbus. With this you can communicate with any component regardless of the relationship. I use npm package mitt

Here is some code I used for child to child communication

Component A -- contains ag-grid-vue

export default {

  setup() {
   return {
      gridApi: null,
      gridColumnApi: null,
}
},
      async mounted() {
        this.eventBus.on('refreshGrid', (args) => {
          this.refreshGrid(args)
        })
    }

     methods: 
    {
          refreshGrid(params) {
           this.gridApi.redrawRows()
     },
    async onGridReady(params) {
      this.gridApi = params.api;
      this.gridColumnApi = params.columnApi;
    }
   }

Component B - function that emits the command to be received by Component A

   this.eventBus.emit('refreshGrid', {yourdata})

You will need to import and setup mitt according to their docs. I added it to my main.js so I did not have to import it in any page.

import mitt from 'mitt'
const eventBus = mitt()

  app.config.globalProperties.eventBus = eventBus