vue中怎么给下面的这种html结构的 中的options[?]赋值？

Question

//需求是:变量number是2 对应的是4个video的视频墙 （1个 ，4个，9个，以此类推的视频监控墙）number是3 对应的结构就是9宫格，现在要做的是 把数组options中的地址赋值给 （v-bind:options） 它是一个对象，怎么才能把数组options中的对象依次赋值给这个video，并且要能够随意赋值给这个video,因为是这样的双for结构 不知道怎么写算法了
<template>

  <div class="box">
      <div class="row" v-for="item in number">
          <div class="col" v-for="item in number" > 
            <video-player class="vjs-custom-skin" :options="options[?]" >
            </video-player>
          </div>
      </div> 
  </div>

</template>

<script>
require('videojs-flash')
export default {

data() {
  return {
     number:3,
     option:null,
  
     options:[
          {
            sources: [{
              type: "rtmp/flv",
              // src: "rtmp://192.168.0.11:1935/live/01"
              src: "rtmp://live.hkstv.hk.lxdns.com/live/hks"
            }],
            techOrder: ['flash'],
            autoplay: true,
            controls: true,
            fluid:true    
          },
          {
            sources: [{
              type: "rtmp/flv",
              // src: "rtmp://192.168.0.11:1935/live/01"
              src: "rtmp://live.hkstv.hk.lxdns.com/live/hks"
            }],
            techOrder: ['flash'],
            autoplay: true,
            controls: true,
            fluid:true    
          }       
     ]   
  }
},
created(){
    for( var i = 0 ; i<this.options.length;i++){
        this.option = this.options[i]
    }
    
    // alert(1);
}

}
</script>

<style scoped>

.box{
  display: flex;
  flex-direction: column;
}
.row{
  display: flex;
  flex-wrap: wrap;
  flex: 1
}
.col{
  flex: 1;
}

</style>

Answer 1

<template>
    <div class="row" v-for="a in number">
          <div class="col" v-for="b in number" > 
            <video-player class="vjs-custom-skin" :options="options[ ( a - 1 ) * number + b - 1 ]" >
            </video-player>
          </div>
    </div> 
<template>