how to use the <i18n directive in a project

[geewhizbang]

I want to use <i18n directive:

     <i18n path="string.filePrepprovalOrGetInTouch" tag="p">
          <template v-slot:filePreapproval>
            <a :href="linkData.preapprovalLink">{{ $t("string.filePreapproval") }}</a>
          </template>
          <template v-slot:getInTouchForAdvice>
            <a :href="linkData.adviceLink">{{ $t("string.getInTouchForAdvice") }}</a>
          </template>
        </i18n>

But the plugin doesn't install the directive, or I haven't set it up properly

script lang="ts">
import { ref, defineComponent, inject } from "vue";

import type { StepData, PetData, StringStringDict } from "../types/types";
import PetBox from "../components/PetBox.vue";

export default defineComponent({
name: "Claims1View",
components: { PetBox, <probably need to include it here, but where do I import it from?> },

[nct124]

anyone can suggest? or its not implemented yet?
found it..
https://vue-i18n.intlify.dev/guide/advanced/component.html#slots-syntax-usage