title: v-model in a nested v-for of a multidimensional array
body: <p>Hi I want to create a table with the days of the selected month where you can a add an employee and mark meals you want to assign to the employee.</p>
  
  <p>I almost there, I can add a row to the table and mark the meals by day but when a second row is added the same meals are marked, all the meals are binded by day if i mark a meal in a row it marks for all the rows.</p>
  
  <p>Here is the code and a jsfiddle</p>
  
  <p>Html</p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;span class="demonstration"&gt;Pick a month&lt;/span&gt;
    &lt;input type="month" v-model="month"&gt;{{month}}&lt;br&gt;&lt;br&gt;
    &lt;button @click="addEmployee()"&gt;Add a employee&lt;/button&gt;&lt;br&gt;
    Mark meals for the employee&lt;br&gt;
    &lt;table border="1"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th rowspan="3"&gt;Name&lt;/th&gt;
          &lt;th :colspan="calendar.length*3"&gt;days of the month&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th colspan="3" v-for="day in calendar"&gt;{{day.date}}&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;template v-for="c in calendar"&gt;
            &lt;th&gt;b&lt;/th&gt;
            &lt;th&gt;l&lt;/th&gt;
            &lt;th&gt;d&lt;/th&gt;
          &lt;/template&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr v-for="(item, indexItem) in list" :key="indexItem"&gt;
          &lt;td&gt;
            &lt;input type="text" v-model="item.name"&gt;
          &lt;/td&gt;
          &lt;template v-for="(day, indexDay) in item.days"&gt;
            &lt;td&gt;
              &lt;input type="checkbox"  v-model="item.days[indexDay].breakfast"&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;input type="checkbox"  v-model="item.days[indexDay].lunch"&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;input type="checkbox"  v-model="item.days[indexDay].dinner"&gt;
            &lt;/td&gt;
          &lt;/template&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Vue</p>
  
  <pre><code>new Vue({
    el: "#app",
    data: {
      month: '',
      list: [
  
      ]
    },
  
    computed: {
      calendar () {
        let selected = new Date(this.month)
        let daysOfMonth = new Date(selected.getFullYear(), selected.getMonth() + 1, 0)
        let days = [{}]
        for (var i = 0; i &lt; daysOfMonth.getDate(); i++) {
          days[i] = {
            date: selected.getFullYear().toString() + '-' + (selected.getMonth() + 1).toString() + '-' + (i + 1).toString(),
            breakfast: false,
            lunch: false,
            dinner: false
          }
        }
        return days
      }
    },
    methods: {
      addEmployee () {
        let cal = []
        cal = this.calendar
        this.list.push(
          {
            name: '',
            days: cal
          }
        )
      }
    }
  })
  </code></pre>
  
  <p><a href="https://jsfiddle.net/patogalarzar/v8h0knt7/" rel="nofollow noreferrer">https://jsfiddle.net/patogalarzar/v8h0knt7/</a></p>