title: How to access / update variables inside v-for loop after mounted
body: <p>Below is my sample code. The value of Ending Inventory is calculated as endingInventory = beginningInventory + newInventory - totalSold. How can i access the value property of endingInventory and update it?</p>
  
  <p>Any help is appreciated.</p>
  
  <p>PS: I am new to Javascript &amp; Vuejs. This could be a simple solution i am not aware of. my apologies in advance.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-6 col-xl-3" v-for="item in totals" :key="item.name"&gt;
        &lt;p&gt;{{ item.name }}:{{ item.value }}&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      data() {
        return {
          totals: [
            { name: 'Beginning Inventory', endPoint: 'beginning-inventory', value: 0 },
            { name: 'New Inventory', endPoint: 'total-new', value: 0 },
            { name: 'Total Sold', endPoint: 'total-sales', value: 0 },
            { name: 'Ending Inventory', endPoint: '', value: 0 }
          ]
        }
      },
      mounted() {
        this.getData(this.totals)
      },
      methods: {
        getData(totals) {
          // method to get data from server
          var http = this.$http
          totals.forEach(function (item) {
  
            if (item.endPoint) {
              var url = `http://localhost:3000/api/entity/${item.endPoint}`
              http.get(url)
              .then(response =&gt; {
                return response.body
              })
              .then(data =&gt; {
                item.value = data
              })
              .catch(error =&gt; {
                console.log(error)
                item.value =  0
              })
            } 
          })
        }
      }
    }
  &lt;/script&gt;
  </code></pre>