Why can't my table component render the value processed by the render function passed in?

In Vue3 , I want to dynamically render my table , but did not take effect

I defined a table component

<script setup>
const props = defineProps({
    columns: {
        type: Array,
        default: () => [],
        required: true,
    },
    data: {
        type: Array,
        default: () => [],
        required: true
    }
})
</script>
<template>
    <table class="table__container">
        <thead>
            <tr>
                <th v-for="column in columns" :key="column.key">{{ column.title }}</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in data" :key="index">
                <td v-for="column in columns" :key="column.key">
                    <span  v-if="column.render">
                        {{  column.render(item) }}
                    </span>
                    <span v-else>{{ item[column.key] }}</span>
                </td>
            </tr>
        </tbody>
    </table>
</template>

I passed columns to the table component ,

const columns = [
    {
        title: 'song',
        key: 'name'
    },
    {
        title: 'singer',
        key: 'singer'
    },
    {
        title: 'album',
        key: 'album'
    },
    {
        title: 'duration',
        key: 'duration',
        render:(row) => {
            const { duration } = row;
            return h(
                'span',
                {},
                formatDuration(duration)
            );
        }
    }
]

but v-if = 'column.render' doesn't take effect, and console error
Uncaught (in promise) TypeError: Converting circular structure to JSON
--> starting at object with constructor 'Object'
| property 'vnode' -> object with constructor 'Object'
--- property 'component' closes the circle
at JSON.stringify (<anonymous>)
How can I fix it？

You can try using <component>

<span v-if="column.render">
   <component :is="column.render(item)"></component>
</span>