Does Vue not support using render function in objects?

[l-7-l]

下面代码中如果render函数返回 vnode h 就会触发错误 Uncaught (in promise) TypeError: cyclic object value
if the render function returns a vnode, it will crash Uncaught (in promise) TypeError: cyclic object value,

<script setup lang="ts">
  
let profileCols = computed(() => {
  if (!contact.value) return []
  return [
    { name: 'department', label: '部门' },
    { name: 'level', label: '职级' },
    { name: 'title', label: '抬头' },
    {
      name: 'numbers',
      label: '手机号',
      render(numbers: string[]) {
        return h('span', '暂无数据') // 
      },
    },
    { name: 'source', label: '来源' },
    { name: 'address', label: '地址' },
    {
      label: '获客链接',
      render: () =>
       {}
    },
    // {
    //   label: '客服',
    //   render: () =>
    //     h('span', contact.value?.extra?.wework?.userId || '暂无数据'),
    // },
    // {
    //   label: '获客场景',
    //   render: () =>
    //     h('span', contact.value?.extra?.wework?.scene || '暂无数据'),
    // },
  ]
})
</script>
<template>
<div v-for="x in profileCols" :key="x.name || x.label">
        <div class="card mb-2">
          <span class="label">{{ x.label }}：</span>
          <span>
            {{
              x.render
                ? x.render(x.name ? contact?.profile[x.name] : undefined)
                : contact?.profile[x.name] || '暂无数据'
            }}
          </span>
        </div>
      </div>
</template>

[LinusBorg]

Interpolations ({{ }}) are for rendering text. You can use a dynamic <component>, which accepts vnodes:

 <span>
   <component
     v-if="x.render"
     :is="x.render(x.name ? contact?.profile[x.name] : undefined)"
   />
   <template v-else>
     {{ contact?.profile[x.name] || '暂无数据' }}
   </template>
 </span>

or

<span>
 <!-- get the Text import from 'vue' -->
  <component :is="x.render ? x.render(x.name ? contact?.profile[x.name] : undefined : h(Text, contact?.profile[x.name] || '暂无数据')" />
</span>

[l-7-l]

thank you sir. 谢谢你老铁