title: Vue.js v-for increment some variable in looped component
body: <p>I'm trying to display a list of items on an event's agenda. </p>
  
  <p>The event has a <code>start_date</code> end each item on the agenda has a <code>duration</code> in minutes, for example:</p>
  
  <pre><code>event:{
    start_date: '2017-03-01 14:00:00',
    agendas:[
        {id:1,duration:10},
        {id:2,duration:15},
        {id:3,duration:25},
        {id:4,duration:10}
    ]
  }
  </code></pre>
  
  <p>Now, in my <code>event</code> component, I load <code>agendas</code> with a <code>v-for</code>:</p>
  
  <pre><code>&lt;agenda v-for="(agenda,index) in event.agendas" 
          :key="agenda.id"
          :index="index" 
          :agenda="agenda"&gt;
  </code></pre>
  
  <p>In <code>agenda</code> component, I want to increment the time at which each item starts: </p>
  
  <pre><code>&lt;div class="agenda"&gt;
    //adding minutes to start_date with momentJs library
    {{ moment(event.start_date).add(agenda.duration,'m') }} //this should increment, not add to the fixed event start date
  &lt;/div&gt;
  </code></pre>
  
  <p>Currently it only adds to the fixed event <code>start_date</code>... I would like to show the times <code>14:00</code> for event <code>1</code>, <code>14:10</code> for event <code>2</code>, <code>14:25</code> for event <code>3</code> and <code>14:50</code> for event <code>4</code>. </p>
  
  <p>How can I increment the value in a <code>v-for</code> directive in Vue.js 2.0?</p>