How to Use Vue Directives In Combination with Vue-i18n?

[OAsik]

One of my sentences which I localized with i18n contains an anchor tag, and this element should trigger another modal. But, when I use @click or v-on:click localization gets broken.

Below is my resources.js file where I create i18n instance:

import { createI18n } from "vue-i18n";
import store from "../../store/index.js";

const activeLocale = store.getters.languageId;

const resources = createI18n({
    locale: activeLocale,
    fallbackLocale: "tr",
    messages: {
        en: {
            expiredAccountPanel: {
                info: "You have {accountCount} social media account(s) which needs to be reconnected. Please contact with your administrator. Click <a @click="openExpiredAccountsModal" style='color:#0D4BA0'>here</a> to view respective social media account(s)."
            }
        }
    }
});

export default resources;

I imported this on my main.js as per below:

import resources from "./configs/localization/resources";

const app = createApp(App);

app.use(resources);
app.mount("#app");

I inject the texts to be localized to my custom warning-panel-base component like this:

<warning-panel-base
    class="home_warning_panel" 
    :page-warning="true" 
    :show="hasExpiredAccounts" 
    :text="$t('expiredAccountPanel.info', { accountCount: expiredAccoutsCount })"
    @close-warning-modal="closeWarningModal"
></warning-panel-base>

Finally, this is my respective custom component:

<template>
    <transition name="panel">
        <div 
            v-if="show" class="warning_panel_wrapper" 
            :class="
                { 
                    page_margin: pageWarning, 
                    form_margin: formWarning 
                }"
            >
            <div class="text_section">
                <font-awesome-icon :icon="['fas', 'triangle-exclamation']" />&nbsp;
                <span>{{ text }}</span>
            </div>
            <div class="close_button_section">
                <span class="icon material-icons" @click="closeWarningModal">close</span>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
    props: [
        "show", 
        "text", 
        "formWarning", 
        "pageWarning"
    ],
    emits: ["closeWarningModal"],
    methods: {
        closeWarningModal() {
            this.$emit("closeWarningModal");
        },
        openExpiredAccountsModal() {
            console.log("modal oppened")
        }
    }
}
</script>

Instead of <span>{{ text }}</span> I also tried <span v-html="text"></span> but it didn't work out too.

How should I properly implement a vue specific directive inside i18n text?