What is the correct way to use i18n in a component?

Question

Vue.js

how to properly use i18n in component
vue_i18n__WEBPACK_IMPORTED_MODULE_3__.useI18n.$t is not a function
///boot/i18n

import { boot } from 'quasar/wrappers';
import { createI18n } from 'vue-i18n';

import messages from 'src/i18n';

const i18n = createI18n({
  locale: 'en-US',
  messages,
});

export default boot(({ app }) => {
  // Set i18n instance on app
  app.use(i18n);
});

export { i18n };

component

import { getModule } from 'vuex-module-decorators';
import EssentialLink from 'components/EssentialLink.vue';
import BasketComponent from 'components/basket-component/BasketComponent.vue';
import i18n from '../boot/i18n';

const linksList = [
  {
    title: i18n.$t('dictionary.terms_and_conditions')",
    // icon: 'school',
    link: i18n.$t('dictionary.terms_and_conditions_link'),
  },
  {
    title: i18n.$t('dictionary.privacy_policy'),
    link: i18n.$t('dictionary.privacy_policy_link'),
  },
  {
    title: i18n.$t('dictionary.cookie_policy'),
    link: i18n.$t('dictionary.cookie_policy_link'),
  },
];

Answer 1

import { useI18n } from 'vue-i18n';

const { t } = useI18n();

const linksList = [
  {
    title: t('dictionary.terms_and_conditions'),
  },
];