Error in ag-grid-vue Could not find component XXX, did you forget to configure this component? - vue.js

Question

I'm using ag-grid-vue and i'm trying to create custom tool tip.
This is my code:
CustomToolTipVue.js component:
export default {
template: `
<div class="custom-tooltip" v-bind:style="{ backgroundColor: color }">
<p><span>{{ data.athlete }}</span></p>
<p><span>Country: </span>{{ data.country }}</p>
<p><span>Total: </span>{{ data.total }}</p>
</div>
`,
data: function () {
return {
color: null,
athlete: null,
country: null,
total: null,
};
},
beforeMount() {
this.data = this.params.api.getDisplayedRowAtIndex(
this.params.rowIndex
).data;
this.color = this.params.color || 'white';
},
};
Grid component - where i'm using it (Attached only the main code):
<script>
import { AgGridVue } from "ag-grid-vue";
import "ag-grid-community";
import CustomToolTipVue from './CustomToolTipVue.js'
export default {
name: "Grid",
data: () => ({
gridOptions: null,
gridApi: null,
gridColumnApi: null,
selectedRows: [],
noRowsTemplate: "",
loadingTemplate: "",
rowClassRules:null
}),
components: {
AgGridVue,
CustomToolTipVue
},
created() {
this.gridOptions = {};
this.gridOptions.columnDefs = this.columnDefs;
this.gridOptions.components = {
};
},
computed: {
defaultColDef() {
return {
resizable: true,
menuTabs: ["filterMenuTab", "generalMenuTab", "columnsMenuTab"],
sortable: true,
filter: true,
tooltipComponentParams: { color: '#ececec' },
tooltipComponent: "CustomToolTipVue",
};
},
},
And i keep getting this error:
"Could not find component CustomToolTipVue, did you forget to configure this component?"
Any idea why?

Answer 1

Managed to solve it by upgrde ag-grid to latest version - 27.0.0