i try to store data from api in prometheus into global variable, i successfully store it from api into variable in vue js using axios, i tried to execute .then(console.log(this.infoCpu) and it worked in console, it has different value because it's from real time situation, but if i try to declare it with global variable on body html it does not work, the value if i try to console as global variable it will has null value, is it the null value comes from the value that i setup from the code on vue js? then how i store from data api into global variable that can be show if i try to show it, example code document.write("variable-that-contain-data-from-api") i need the variable because i use some library called gauge that need varibable contain data cpu real time from api

it is the code

 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))
}
})

that was the code that use to get data from api, and in console that is the right value of the variable this.infoCpu comes up at console.

but when i tried to show it at html body using document.write(newCpu.infoCpu), it does not has value, that just showing null default value that i set up on vue js code

but i try to show it using this code, it comes up

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

image variable work

so how to correctly save data from api into variable and use it into another library that i want to use, because it looks like does not mount data from api if try to show it with document.write(newCpu.infoCpu), i need the varibale to work with my gauge library that need a variable