title: count in nested v-for in vueJS
body: <p>Im working with vueJS and the v-for seems very powerless for a simple counting. I have code similar to this</p>
  
  <pre><code>&lt;template v-for="(data, id, i) in group"&gt;
     &lt;div v-for="column in group[id]"&gt;
       &lt;div v-for="(promo, j) in column.array" :style="{top: i*column.array.length+j}"&gt;&lt;/div&gt;
     &lt;/div&gt;
   &lt;/template&gt;
  </code></pre>
  
  <p>Column.array is different for each column. i.e 23, 45, 12</p>
  
  <p>I need the counting to happen like 0, 1, 2, 3...23, 24, 25 ... 68, 69, 70 ... 80</p>
  
  <p>But now its happening like 0, 1, 2, 3...23, 1, 2, 3, ... 45, 2, 3 ... 12</p>
  
  <p>I need this to increment css top value for each block. I have tried using a data field like height and incremented it using height++. But it is giving infinite loop error. I read in the docs mutable data shouldn't be handled that way. So how can this be accomplished?</p>