In my project I want to visualize some data that I fetched from an API on a vue3-webapp. Now I have the problem that the chart renders before I get the data from my async fetch function. So I use Key-changing according https://michaelnthiessen.com/force-re-render/. At the end of my fetch function I want to increase the counter what should lead to a re-rendering of the chart. Because of some reason I can't use the this. operator to use my counter. What can I do instead?

(re)rendering in html: <LineChart :key="counter" id="line-chart" /> exportdefault.data.return: counter: 0, exportdefault.methods:

forceRerender() {
        this.counter ++;
        },

exportdefault.mounted():

        const xTime = [];
        const yValue = [];
        const data2 = [];
        const api_url = "http://192.168.178.84:4997/wirkleistungL1";

        async function getData() {
            const response = await fetch(api_url);
            const data = await response.json();
            var result = data[0].result;
            var lastdayunix = new Date(new Date(new Date(result[result.length - 1].DateTime)).toISOString().slice(0, 10)).getTime();


                for (let i = 0; i < result.length; i++) {
                    if (result[i].DateTime >= lastdayunix) {
                    xTime.push(String(result[i].DateTime));
                    yValue.push(parseFloat(result[i].Value));
                    }
                  }
            this.forceRerender()


        }

        getData();

Error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'forceRerender') at getData