I’m creating a component that needs to render out of a bunch of concated strings. Vue’s compile and h functions accomplish this quite nicely while having access to the parent context (unlike the template option).

However, the compiled text itself has no access to the parent context. Here’s my simplified code:

<script setup>
    
    import {compile, h, computed } from 'vue'
        
    const props = defineProps(['commTemplate', 'content']);
        
    const textStyle = computed(() => ({
        fontSize: props.commTemplate.textSize + 'px',
    }));
        
    const titleTyle = computed(() => ({
        fontSize: props.commTemplate.titleSize + 'px',
    }));
        
    const structure = [];
    const parts = [];
    structure[0] = `
    <table>
        <tr>
            <td :style="textStyle"></td>
            <td>
                `; parts['thing'] = `
            </td>
            <td :style="titleStyle">Optional Part</td>
            <td>
                `; structure[1] = `
            </td>
        </tr>
    </table>
    `;
                                                    
    const render = () => {
        
        return h(compile(structure[0] + parts['thing'] + structure[1]));
        
    };

</script>
<template>
    <render />
</template>

After running this, Vue complains about textStyle not being defined when it encounters :style="textStyle".

Is there any way to render/compile this along with the parent context?