AEM CQ对话框将覆盖自定义响应网格

Question

我正在开发TAB组件，每个选项卡是一个多字段的字段，在HTL中渲染时，它会在该多字段的item＃字段内创建一个响应网格。一切都第一次很好，但是每当我返回对话框时，添加其他选项卡并单击“确定”，每个选项卡的响应网格就消失了。

我想我在保存cq对话框时会以某种方式覆盖数据，并且由于响应网格不是对话框的一部分，因此不会添加。我该如何解决这个问题？是否可以防止对话框覆盖？还是以某种方式在对话框中包含响应网格？

HTL：

10 0 1 2 3 4 5 8 9 11

CQ对话

    <section data-title="${tabItem.title}" class="cmp-tabs__tabSection
            ${tabItemList.first ? 'is-active' : ''} ${wcmmode.edit ? 'author' : ''}"
             id="${uniqueElemId.uniqueId}-tab-${tabItemList.index}-tabsection" role="tabpanel" aria-labelledby="${uniqueElemId.uniqueId}-tab-${tabItemList.index}"
             aria-hidden="${tabItemList.first ? 'false' : 'true'}"
             aria-selected="${tabItemList.first ? 'true' : 'false'}">
            <div class="tabContent" data-sly-resource="${'tabs/item{0}/tabcontent' @ format=tabItemList.index,
            resourceType='wcm/foundation/components/responsivegrid'}"></div>
    </section>

CRXDE示例：