En mi proyecto, quiero visualizar algunos datos que obtuve de una API en una aplicación web vue3. Ahora tengo el problema de que el gráfico se representa antes de obtener los datos de mi función de recuperación asíncrona. Así que uso el cambio de clave según https://michaelnthiessen.com/force-re-render/ . Al final de mi función de búsqueda, quiero aumentar el contador, lo que debería conducir a una nueva representación del gráfico. Por alguna razón, no puedo usar this. operador para usar mi contador. ¿Qué puedo hacer en su lugar?

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

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

exportdefault.montado():

 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:

No capturado (en promesa) TypeError: no se pueden leer las propiedades de undefined (leyendo 'forceRerender') en getData