Trouble Updating AG Grid Detail Grid Template Dynamically with API Response in Vue.js

Question

Description:

We are planning to purchase the AG Grid Enterprise edition. In the Detail Grid feature, when clicking the row expansion icon, we want to make an API call and update the `detailCellRendererParams.value.template' property based on the response. I've attempted the following code, but it's not working, and I'm encountering a console error.

Here is the code snippet we've tried:

import { onBeforeMount } from 'vue';

onBeforeMount(() => {
  detailCellRendererParams.value = {
    template: async (params) => {
      const filePath = '../../html/Grid-html-file.html';
      const firstName = params.data.FirstName;
      const response = await fetchData(); // Assuming fetchData is an asynchronous function
      if (response.ok) {
        const htmlString = await response.text();
        return '<div ref="eDetailGrid" style="height: 90%;">' + htmlString + '</div>';
      }
    },
  };
});

However, we are encountering a console error when attempting to dynamically update the template. The error can be viewed in this console error image.

Expecting:

Is it possible to dynamically update the template based on an API response in this scenario? If yes, could you provide a solution to achieve that? Otherwise, what alternative solutions are available for this requirement?