title: Update html dashboard cards through Vue js
body: <p>I am developing a Vue dashboard communicating with Woocommerce REST API. I have created a few dashboard cards to show total orders of the day and order count and one more card.
  I have html code like below for cards:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;dashbord dashbord-red&quot;&gt;
      &lt;div class=&quot;icon-section&quot;&gt;
          &lt;small&gt;Total Sales&lt;/small&gt;
          &lt;p&gt; v-for=&quot;totalsales, index in totalSales&quot;&gt;
              Total - Total is: {{ totalsales.total_sales }}&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Vue js code</p>
  <pre class="lang-js prettyprint-override"><code>// creating Vue instnce
  var app = new Vue({
    el: '#app',
    data: {
      orders: []
    },
    data: {
      totalsSales: []
    },
    mounted: function () {
      // Call the API the first time
      this.refreshData()
      // Then call the API every minute
      this.setIntervalId = setInterval(this.refreshData, 60000)
      // Updating cards  
      this.getTotalSalesToday()
    },
  
    methods: {
      getTotalSalesToday() {
        axios.get('https://staging.mysite.de/wp-json/wc/v3/reports/sales?date_min=2020-09-18&amp;consumer_key=123&amp;consumer_secret=123')
          .catch(error =&gt; {
            console.log(error);
  
          });
      }
    })
  </code></pre>
  <p>I am just getting the text inside the p tag, not the value. I could not find what am I doing wrong here?
  Thank you</p>