title: How can I update my VueJs Data function properties value while fetching data from API using axios?
body: <p>I have successfully fetched data from API. The fetched data shows in the alert function. However, the properties in the data function such as - 'Recovered' is not updating. I can show the fetched data using Vanilla JS. But I want to update them automatically and want to show them like this {{Recovered}}. 
  How can I do it??</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;template&gt;
      &lt;div class="container"&gt;
  
          &lt;h2&gt;Total Recovered: {{Recovered}}&lt;/h2&gt;
  
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import axios from 'axios'
      export default {
          name:'CoronaStatus',
          data: function () {
              return {
  
                      Recovered: '',
                      TotalConfirmed: '',
                      TotalDeaths: '',
                      // test: '30',
                      // test_2: 'maheeb',
                      // componentKey: 0,
  
  
  
              }
          },
          mounted(){
              this.globalStatus();
          },
  
          methods:{
              globalStatus: function(){
                  // const self = this;
                  // this.componentKey += 1;
                  axios.get('https://api.covid19api.com/summary')
  
                      .then((response) =&gt; {
                             // this.recovered = response.data.Global.NewConfirmed;
                          this.Recovered= response.data.Global.TotalRecovered;
  
  
                          alert(this.Recovered);
  
                      
                          // document.getElementById('test_5').innerHTML = "total: " + this.TotalRecovered;
  
                  }).catch(err=&gt; console.log(err));
  
  
              },
  
  
          }
  
  
      }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  
  &lt;/style&gt;</code></pre>
  </div>
  </div>
  </p>