How to use <i18n-t> in Web component?

I'm creating a Vue web component using i18n And I wanna put a span tag with color in here is my code demo. I wanna know how to import

<!-- custom-element.ce.vue -->
<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const locale = ref('en')
defineProps({
  locale: String,
})
</script>
<template>
<div classs="custom-ele-wrap">
    <i18n-t keypath="title" tag="span">
        <template #text>
             <span :class="['locale-text', locale']"> {{ localeText }} </span>
        </template>
    </i18n-t>
</div>
</template>
<style scoped>
.locale-text.en {
    color: blue;
}
.local-text.zh-TW {
    color: red;
}
</style>

// <!-- i18n json -->
{
    "en": {
        "title": "{text} language",
    },
    "zh-TW": {
        "title": "這是{text}語言",
    }

}

but it shows enter image description here