ag-grid Cell Renderer won't render component with jQuery

Question

I'm using ag-grid in a Vue3 (Composition API) app, and trying to display a some jQuery sparklines (https://omnipotent.net/jquery.sparkline/#s-about) within some of the cells.

As per the ag-grid docs (https://www.ag-grid.com/vue-data-grid/cell-rendering/) I should be able to show my vue component within the grid by using Cell Renderer. However, so far my attempts have failed.

To start with I created a simple vue component that shows a jQuery sparkline, with values hardcoded:

<template>
    <span ref="cellRef"></span>
</template>

<script>
import $ from 'jquery';
import 'jquery-sparkline';
import {onMounted, ref} from "vue";

const cellRef = ref(null);

onMounted( () => {
    renderSparkline();
});

const renderSparkline = () => {
    $(cellRef.value).sparkline([5, 4, 100, 8, 17, 66], {type :'line'});
}

</script>

I saved this as MyCellRenderer.vue, and imported it into my main component. If I include it within the main template by doing , it displays the sparkline just fine.

But when I try to include it as part of the ag-grid, by putting:

cellRenderer: MyCellRenderer

in the appropriate place in the columnDefs.

But the sparkline will not appear in the grid. I can't figure out why. The component is definitely there in the grid, because I tried replacing with Hello world, and I could see the text within the grid. But for some reason the jquery sparkline will not show. I've tried wrapping the component with defineComponent(), but that didn't work either.