使用 v-for 动态渲染表单无效 ?

    const panes = [
      {title: '创意 1', content: ``, key: 1,index: 1},
      {title: '创意 2', content: ``, key: 2,index: 2}
    ];

当我在使用遍历的时候

 <a-tabs v-model="activeKey" hide-add type="editable-card" @edit="onEdit">
                  <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
                    {{ pane.content }}
                  </a-tab-pane>

                  <a-button v-if="panes.length < 1" @click="add" slot="tabBarExtraContent">
                    <a-icon type="plus"/>
                  </a-button>

                </a-tabs>

这里的 pane.content， 如何使用组件？ 也就是说 panes content 这个字段如何写， 才能使用一些组件， 我尝试过 使用<template><a-from-model-item label="创意名字"> <a-input placeholder="请输入创意名字" v-model="tgjhForm.names[{{index}}].campaignName"/></a-from-model-item></template> , 但是使用{{ pane.content}} ，的时候直接原样输出了。 并没有将 content 的组件渲染出来，而且在 content 里面使用{{index}} 也是无效的。 各位同学帮忙看看， 我要如何修改才能达到，动态渲染的效果.