Javascript 将生成的JSON HTML表示呈现为HTML（vue.js—；Headless）

目前我正在尝试将NUXT.js与KirbyCMS的无头版本结合起来。 基本上，CMS接收数据并将其转换为JSON格式

数据只包含图像、文本、图库、图像等内容。（基本上，任何东西都可以

我的问题： API给了我一个非常扁平的数据结构，我不知道如何正确地构造它，下面是一个例子

[{
    "attrs": {
        "group": "default",
        "blockClass": "",
        "rowClass": "",
        "autoLayout": true,
        "images": [{
            "filename": "bildschirmfoto-2020-07-26-um-19.10.51.png",
            "guid": "/pages/about/files/bildschirmfoto-2020-07-26-um-19.10.51.png",
            "altText": "",
            "imageClass": ""
        }]
    },
    "content": "",
    "id": "_xmyqaklgh",
    "type": "gallery"
}, {
    "attrs": {
        "group": "default",
        "images": [{
            "filename": "bildschirmfoto-2020-07-27-um-19.34.25.png",
            "guid": "/pages/about/files/bildschirmfoto-2020-07-27-um-19.34.25.png",
            "altText": "",
            "imageClass": ""
        }]
    },
    "content": "",
    "id": "_vzbpk4wlg",
    "type": "gallery"
}, {
    "attrs": [],
    "content": "Test",
    "id": "_f02i6jix4",
    "type": "ul"
}, {
    "attrs": {
        "indent": 0
    },
    "content": "Tag 2",
    "id": "_8jkbqbmsc",
    "type": "ul"
}]

我要做的是呈现vue组件中的元素。主要问题是，我无法将任何列表分组，也无法确定哪个库应分组在一起

<div v-for="block in data" :key="block.id" class="text--element">
    <h1 v-if="block.type == 'h1'">{{ block.content }}</h1>
    <h2 v-if="block.type == 'h2'">{{ block.content }}</h2>
    <h3 v-if="block.type == 'h3'">{{ block.content }}</h3>
    <p v-if="block.type == 'paragraph'">{{ block.content }}</p>
    <ul v-if="block.type == 'ul'">
        <li> {{ block.content }} </li>
    </ul>
</div>

{{block.content}
{{block.content}
{{block.content}
{{block.content}

{{block.content}

我目前的方法是迭代项目并显示其类型是否正确。但这似乎不正确，感觉也不对。有没有更好的方法来解决这个问题