vue v-for如何按固定行数渲染列表

Question

有数组对象，想按列渲染，一列显示23行，第一列大于23，开始渲染第二列，数据格式如下：

   {
    "case1": [
        {
        "name": "src1"
        },
        {
        "name": "currentSrc1"
        }
    ],
    "case2": [
        {
        "name": "src2"
        },
        {
        "name": "currentSrc2"
        }
    ]
}

最终想要的效果，如下图，key需要单独显示，下面name依次且有序号：

我现在思路只能通过两次v-for循环显示出，每个大类case及它下面的name,不知道如何做到从左至右，一列显示23条后，再转入第二列，依次往后，请问有什么思路或者办法处理这个问题，现在效果如下图：

Answer 1

用你源数据直接处理可能比较麻烦。
你可以换个思路，可以用computed提前处理源数据，处理成切分好的，每个子数组长度为23的二维数组，再用这个二维数组渲染列表

Answer 2

支持flex吗，可以使用flex或grid

.box{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}