vue.js 多维数组索引值的处理

Question

1.数组结构如下

filters: [
    {      categories: ['电子商务', '互联网医疗', '互联网金融'],      showFilter: false,      title: '分类'
    }, {      categories: ['正在申购', '申购完成'],      showFilter: false,      title: '状态'
    }, {      categories: ['杭州', '上海', '北京', '深圳', '广州'],      showFilter: false,      title: '地区'
    }
   ]

2.template如下

<div class="filter fl" track-by="$index" v-for="filter in filters">
    <div class="filter-title" @click="toggleFilter($index)">
      <h3>{{filter.title}}</h3>
    </div>
    <ul class="filter-list" transition="scaley" v-show="filter.showFilter">
      <li class="hairline-bottom" @click="changeFilter($index)" v-for="category in filter.categories">{{category}}</li>
    </ul></div>

3.我的需求：点击每个li的时候，让数组中每一个对象的title都变为对应的categories里面的文字

4.遇到的问题：两次v-for，在点击li的时候，$index是categories的索引，而非对象在filters中的索引，那么如何才能知道对象在filters中的索引，并且将对应的category值赋值到对应的对象的title上呢？比如：

this.filters[0].title = this.filters[0].categories[1]

5.简单的方法就是更改数据结构，几个大分类单独成为一个对象，但是感觉不太爽...