I have the below class. The functions of the class are not assigned to the data property 'this.gridFilter' when instantiated. I am calling 'gridFilter.set' onclick of the list item which does not get triggered and I get the following error on the console 'Cannot read properties of undefined (reading '_withTask')' and nothing works. This happens only when I call the 'set' function from the instantiated object. How can I call the class functions from the Html file? Please help

class GridFilters
{

    constructor(grid)
    {
        this.grid = grid;
        this.filterError = false;
        this.isShow = false;
        this.currentFilter = '';
        this.filters = {};
    }

    async loadFilters()
    {
        const query = `?$select=*&$filter=mastertable eq ${window.parent.Xrm.Page.data.entity.getId().replace(/[{}]/g, "")}&$orderby=ice_name asc`;
        this.filters = await window.parent.Xrm.WebApi.retrieveMultipleRecords('filters', query);
        return this.filters;
    }

    async set()
    {
        const grid = this.grid;
        grid.$refs.overlay.classList.remove('customgrid-modal-hidden');
        grid.$refs.filter.classList.remove('customgrid-modal-hidden');
    }

}


export default {
 data() {
  return {
  gridFilter : {};
  };
 },
methods: {},
created () {
this.gridFilter = new GridFilters(this); 
 }
 };

//html

<li><a v-on:click="gridFilter.set"><img src="../Images/ICE.Filter.svg" title="Filter" /><span>Filter</span></a></li>