How to execute a v-html attached to a function only once?

I have a Vue component which has Tabs ( bootstrap-vue ). Inside each tab there are radio buttons. The label of each radio is being populated using v-html property. The problem here is each time I switch between the tabs the method appendPresetHtml() is called and html overlaps here, I want to call the method only once for each radio ( other case if content is already present inside no need to again call the method to overlap and populate ). No need to call them each time I'm switching between tabs In the appendPresetHtml method I'n generating dynamic html that is appended to that particular div. I'm not getting thsi to work properly.

<b-tabs id="presets-tab" pills class="consent-type-tab" v-model="tabIndex">
    <b-tab v-for="bannerDesign in availableBannerDesigns" :key="bannerDesign">
        <b-form-radio-group name="preset-list" v-model="selectedPreset.id">
            <template v-for="(preset, index) in templatePresets">
                <b-form-radio :value="preset.id" :key="preset.name" v-if="filteredPresets(preset, bannerDesign)" :disabled="isRecommendedPresetDisabled(preset)" @change="selectPreset(preset, index)"> <!--  -->
                    <div v-html="appendPresetHtml(preset)" :id="'preset-box-'+ preset.id" :class="[ 'preset-'+ preset.settings.theme, isRecommendedPresetDisabled(preset) ? 'radio-opacity preset-'+ preset.settings.consentBarType : 'preset-'+ preset.settings.consentBarType,]"></div>     
                </b-form-radio>
            </template>
        </b-form-radio-group>
    </b-tab>
</b-tabs>