I'm trying to take a function from an object array and run it in a @click event on a DOM element. The only way I found to do this was by saving the function as a string inside the object, and render it with new Function:

const func = 'editor.chain().focus().toggleBold().run()'

const renderFunction = new Function('return ' + '(func) => { return func }')()

console.log(renderFunction(func))

Output:

editor.chain().focus().toggleBold().run()

This seems to return func correctly inside the script setup tags, which is the function I want to run inside the @click directive but it doesn't seem to work inside the directive. When I click on this icon:

<fa class="icon" 
v-for="(button, key) in tool.buttons" 
:key="key" 
type="button" 
:icon="[ 'fas', button.icon ]" 
:title="button.text" 
@click="renderFunction('editor.chain().focus().toggleBold().run()')"
></fa>

Nothing happens and no error is shown. This function should actually set the font inside tiptap rich text editor to bold. Adding console.log to renderFunction:

const renderFunction = new Function('return ' + '(func) => { return console.log(func) }')()

returns func as a string upon click so at least the string value seems to be sent to the function correctly, but why is the function not run inside the directive?