intento almacenar datos de api en prometheus en una variable global, los almaceno con éxito de api en una variable en vue js usando axios, traté de ejecutar .then(console.log(this.infoCpu) y funcionó en la consola, tiene valor diferente porque es de una situación en tiempo real, pero si trato de declararlo con una variable global en el cuerpo html no funciona, el valor si trato de consolar como variable global tendrá un valor nulo, ¿de dónde proviene el valor nulo? el valor que configuro desde el código en vue js? Entonces, cómo almaceno desde la API de datos en la variable global que se puede mostrar si trato de mostrarlo, código de ejemplo document.write("variable-that-contain-data-from- api") necesito la variable porque uso una biblioteca llamada calibre que necesita variable que contenga datos cpu en tiempo real de api

es el codigo

 var newCpu = new Vue({ el: '#cpuHead', data () { return { infoCpu: null } }, mounted () { axios .get('http://172.168.20.21:9090/api/v1/query?query=prometheus_tsdb_head_series_created_total') .then(response => (this.infoCpu = response.data.data.result[0].value[1])) .then(console.log(this.infoCpu)) } })

ese fue el código que se usó para obtener datos de la API, y en la consola ese es el valor correcto de la variable this.infoCpu que aparece en la consola.

pero cuando traté de mostrarlo en el cuerpo html usando document.write(newCpu.infoCpu), no tiene valor, solo muestra el valor predeterminado nulo que configuré en el código vue js

pero trato de mostrarlo usando este código, aparece

 <div id="cpuHead> {{ infoCpu }} </div>

trabajo de imagen variable

entonces, cómo guardar correctamente los datos de la API en la variable y usarlos en otra biblioteca que quiero usar, porque parece que no monta datos de la API si intento mostrarlos con document.write(newCpu.infoCpu), necesito el varibale para trabajar con mi biblioteca de indicadores que necesitan una variable