@click doesn't work when rendering it using v-html

Your issue is, that the HTML inside the v-html directive is not processed by Vue's template compiler at all.

Because the compiler doesn't compile this HTML, the @click is not interpreted (but simply rendered without triggering any action).

For this to work, you'd need to iterate over all columns and initialize a new component that handles what's inside the cell yourself directly in HTML (and not in some string that's gonna be rendered later on).

I guess that this is enough - if you still need to interpret what's in the string, you may use Vue.compile to interpret the content. But be careful as it's not safe in case there's some malicious code in it - but since the directive by default has no sanitizing at all, I guess that's just the way Vue.js works.

Thanks to @SimplyComple0x78 for the answer, I marked your suggestions:

For this to work, you'd need to iterate over all columns and initialize a new component that handles what's inside the cell yourself directly in HTML (and not in some string that's gonna be rendered later on).

so I try to create and initialize a new component, I call it element-generator. reference from here. here's the code:

// element-generator.vue
<script>
    export default {
        render: function (createElement) {
            const generatedChildren = (child) => {
                if(!child) return // when child of undefined
                if(typeof child === 'string') return child // when children is String
                return child.map((e,i,a)=>{
                    if(typeof child[i] == 'string'){
                        return child[i]
                    }else{
                        return createElement(
                            child[i].tag,
                            child[i].attributes,
                            generatedChildren(child[i].children) // javascript recursive
                        )
                    }
                })
            }
            return createElement(
                this.formatter.html.tag,
                this.formatter.html.attributes,
                generatedChildren(this.formatter.html.children)
            )
        },
        props: {
            formatter: {
                type: Object,
                required: true
            },
        },
    }
</script>

and I no longer use v-html in component.vue instead I just do a check inside <td> and call element-generator to handle what's inside the cell:

// component.vue
<tbody class="bg-white divide-y divide-gray-200">
    <tr v-for="(row, rowIndex) in data" :key="rowIndex">
        <td v-for="(col, colIndex) in column" :key="col.dataField"
            :class=" col.classes ? col.classes(row[col.dataField],row,rowIndex,colIndex) : '' "
            class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"
        >
            <element-generator v-if="col.formatter" :formatter="col.formatter(row[col.dataField],row)"></element-generator>
            <div v-else>{{row[col.dataField]}}</div>
        </td>
    </tr>
</tbody>

and in parent.vue I replaced the String with the Object that will be passed to the element-generator later, it looks like this:

// parent.vue
computed: {
    column() {
        return [
            {
                dataField: 'name',
                text: 'Name',
            },
            {
                dataField: 'color',
                text: 'Category Color',
                formatter: (cell,row) => {
                    return {
                        html: {
                            tag: 'div',
                            attributes: {
                                class: 'flex'
                            },
                            children:[
                                {
                                    tag: 'div',
                                    attributes: {
                                        style: `background-color: ${cell};`,
                                        class: 'rounded-full h-8 w-8 flex items-center justify-center mr-2',
                                    },
                                },
                                {
                                    tag: 'div',
                                    attributes: {
                                        class: 'font-bold text-gray-500',
                                    },
                                    children: cell
                                },
                            ]
                        }
                    }
                },
            },
            {
                dataField: 'actions',
                text: 'Actions',
                formatter: (cell,row) => {
                    return {
                        html: {
                            tag: 'a',
                            attributes: {
                                class: 'text-indigo-600 hover:text-indigo-900',
                                on: {
                                    click: this.toggleModalEdit
                                },
                                attrs: {
                                    href: "#"
                                },
                            },
                            children: 'Edit'
                        },
                    }
                },
            },
        ]
    },
},

then when I inspect it in the browser, the result is like this(this is different from the previous one):

and finally what I want to display when Edit is clicked is now displayed:

Thank you very much everyone.