동적컴파일 적용방법

안녕하십니까 

동적 컴파일에 대해 질문합니다

sample program

<template>

    <div>

        <div @click="testevent">Hello Hi</div>

        {{ vueText }}

    </div>

</template>

<script setup>

    const vueText =ref('')

    const testevent =  () => {

        vueText.value = 'good'

    }

</script>

출력

Hello Hi

Hello 클릭을 하면 

Hello Hi

good

이 sample program을 아래와 같이 변경하여 적용하면

<template>

    <div>

        <div v-html="renderData" />

         {{ vueText }}

    </div>

</template>

<script setup>

    const vueText =ref('')

    const renderData = '<div @click="testevent">Hello Hi</div>'

    const testevent =  () => {

        vueText.value = 'good'

    }

</script>

출력

Hello Hi 로 정상적으로 나타나나

Hello 클릭을 하면 무응답으로 나타남

무응답이유를 구글링해서 보면 renderData가 들어갈때 컴파일이 안되었기 때문이라는 결론 도출

해서 동적 컴파일을 npm i vue-runtime-template-compiler 설치하여 시도해보았으나 

[Vue warn]: Failed to resolve component: RuntimeTemplateCompiler 표시만되고 동작하지 않음

질문사항

1. renderData가 컴파일이 안되어 무응답인지 ? 궁금하며

만약 그럴경우 동적 컴파일을 해서 넣어주는 방법이 무엇입니까 ?

2. vue-runtime-template-compiler 설치하고 nuxt에서 사용하는 방법어떻케 되는지 궁금합니다

수고하세요