title: bind multidimensional array with vuejs
body: <p>I am building a dynamic table on my front end side, and at the end i need to know what was inserted on each cell of my table since it is editable, so i did this on my html:</p>
  
  <pre><code> &lt;table class="table table-responsive"&gt;
      &lt;tbody&gt;
        &lt;tr v-for="(row,idx1) in tableRows" :class="{headerRowDefault: checkHeader(idx1)}"&gt;
          &lt;td class="table-success" v-for="(col,idx2) in tableCols"&gt;&lt;input v-model="items[idx1][idx2]" type="text" class="borderTbl" value="HEY"/&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p>as you guys can see. i set inside the input a v-model with items[idx1][idx2] so i can pass the value to that line and columns, it is not working like this, i don't know how to set it.</p>
  
  <p>This is my javascript:</p>
  
  <pre><code>export default {
    name: 'app',
    data () {
      return {
        table: {
          rows: 1,
          cols: 1,
          key: 'Table',
          tableStyle: 1,
          caption: '',
          colx: []
        },
        hasHeader: true,
        hasCaption: true,
        insert: 1,
        idx2: 1,
        items: []
      }
    },
  </code></pre>
  
  <p>computed: {</p>
  
  <pre><code>tableStyles () {
    return this.$store.getters.getTableStyles
  },
  tableRows () {
    return parseInt(this.table.rows)
  },
  tableCols () {
    return parseInt(this.table.cols)
  }
  </code></pre>
  
  <p><strong>expected items array:</strong></p>
  
  <pre><code>items:[
     ["john","Micheal"]
     ["john","Micheal"]
     ["john","Micheal"]
     ["john","Micheal"]
  ]
  </code></pre>