vue.js - v-for on indexed array -

i have complex web application , trying convert vuejs … seem have hit problem when try create v-for loop on indexed array. have hit limitation of vuejs?

here’s contexts html loop:

        <div v-for="(thisview,vindex) in viewsettings">             <div v-for="(thetemplate,tindex) in itemplates" v-bind:id="'tmpt-vf-tab-'+thisview.incid+'-'+tindex">                 <span class="attribute-controls" v-for="thisatt in thisview.c.catts[tindex]">                     <input type='checkbox' v-model='thisatt.useatt'/> {{ thisatt.attid }}                 </span> 

vuejs tells me there problem render function: “undefined not object (evaluating 'thisview.c.catts[tindex]')”

any thoughts?

here's example program demonstrates v-for nestings working expected. might check whether data structure works here.

new vue({    el: '#app',    data: {      viewsettings: [{        c: {          catts: [            [{              useatt: false,              attid: 'only'            }],            [{                useatt: true,                attid: 'first'              },              {                useatt: false,                attid: 'second'              }            ]          ]        }      }],      itemplates: [2, 3]    }  });

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>  <div id="app">    <div v-for="(thisview, vindex) in viewsettings">      <div v-for="(thetemplate, tindex) in itemplates">        <div class="attribute-controls" v-for="thisatt in thisview.c.catts[tindex]">          <label>{{thisatt.attid}} <input type='checkbox' v-model='thisatt.useatt' /></label> {{thisatt.useatt}}        </div>      </div>    </div>  </div>