(Vue 3) Error: AG Grid: cannot get grid to draw rows when it is in the middle of drawing rows

-- Initial setup --

Create component

const ButtonAgGrid= {
  template: "<button>{{ displayValue }}</button>",
  setup(props) {
    const displayValue = 'TEST-TEXT';
    return {
      displayValue,
    };
  },
};

Register component

<AgGridVue
  :components="{
    ButtonAgGrid
  }"
  ...
/>

Pass data

const columnDefs = [
{
  field: "name"
},
{
  field: "button",
  cellRenderer: "ButtonAgGrid",
}
]

const rowData = computed(() => {
  return {
   name: testReactiveValue.value ? 'test', 'test2'
  }
})

And when computed "rowData" updated, agGrid send error:

Error: AG Grid: cannot get grid to draw rows when it is in the middle of drawing rows. Your code probably called a grid API method while the grid was in the render stage. To overcome this, put the API call into a timeout, e.g. instead of api.redrawRows(), call setTimeout(function() { api.redrawRows(); }, 0). To see what part of your code that caused the refresh check this stacktrace.

But if we remove cellRenderer: "ButtonAgGrid", all work good

My solution is to manually update rowData.

watchEffect(() => {
  gridApi.value?.setRowData(props.rowData);
});

This one works well, but I wish it was originally