双层列表动态渲染svga,不显示的问题

<div v-for="(row,rowIndex) in list" :key="rowIndex">
  <div class="item" v-for="(item,index) in row" :key="index">
    <div class="icon">
      <!-- svga -->
      <div class="svg" :id="`frame_${item.gid}`"></div>
    </div>
  </div>
</div>

错误渲染(先渲染的svga)


setTimeout(() => {
    list.forEach((item,index) => {
        // svga
        let parser = new SVGA.Parser(`#frame_${item.gid}`)
        let player = new SVGA.Player(`#frame_${item.gid}`)
        parser.load(`https://xxxx/${item.gid}_art`, function
            (videoItem) {
            player.setVideoItem(videoItem);
            player.startAnimation();
        }, function (error) {
            window.winOcx.tip(error.message);
        })
    })
  for (let i = 0; i < list.length; i += 4) {
     this.list.push(list.slice(i, i + 4));
  }
}, 100)

正确渲染(先渲染双层列表)

let list = res.data
for (let i = 0; i < list.length; i += 4) {
  this.list.push(list.slice(i, i + 4));
}
setTimeout(() => {
  this.list.forEach((row,index) => {
    row.forEach(item=>{
        // svga
        let parser = new SVGA.Parser(`#frame_${item.gid}`)
        let player = new SVGA.Player(`#frame_${item.gid}`)
        parser.load(`https://xxxx/${item.gid}_art`, function
            (videoItem) {
            player.setVideoItem(videoItem);
            player.startAnimation();
        }, function (error) {
            window.winOcx.tip(error.message);
        })
    })
  })
}, 100)