a标签里显示spinnerList里的数据，但是要按照第0项里的所有值、第一项里的所有值来，spinnerList里没有数据就不显示a标签，如何解决？

问题

我现在遇到一个问题就是我现在有个数据是这样的

const spinner = reactive(['学校概况','职能部门','教学机构','教学科研','招生就业','学工团委','智慧校园','图文信息','信息服务']);
const spinnerList = reactive([['现任领导','领导'],['ii','jj']]);

html结构是这样的

<li class="nav-list-item" v-for="(val,index) in spinner" :key="index">
  <p @mousemove="popup($event)" @mouseout="exit($event)">{{val}}</p>
   <div class="nav-list-ul">
     <div v-for="(val,i) in spinnerList" :key="i">
      <a href="#" v-for="(item,j) in val" :key="j">{{item}}</a>
     </div>
   </div>
</li>

现在li是正确显示出来了，但是每个a标签都是spinnerList的第0项数据里的值。

我想达到的效果

a标签里显示spinnerList里的数据，但是要按照第0项里的所有值、第一项里的所有值来，spinnerList里没有数据就不显示a标签

这样呢：

<li class="nav-list-item" v-for="(val,index) in spinner" :key="index">
  <p @mousemove="popup($event)" @mouseout="exit($event)">{{val}}</p>
   <div class="nav-list-ul">
     <div v-for="(val,i) in spinnerList[index]" :key="i">
      <a href="#">{{val}}</a>
     </div>
   </div>
</li>