尽管我的评论，它仍然可以使用vue-i18n与vue-class-component。在Vue3中，useI18n需要在设置函数的顶部使用，如错误消息中所述。vue-class-component导出一个设置函数，你可以用不同的方式使用它，我们将使用它。下面是如何做到这一点。
首先，您需要创建app并安装vue-i18n：
在你的main.ts或任何你的应用程序的入口：

import { createApp } from "vue";
import App from "./App.vue";
import { createI18n } from "vue-i18n";

const i18n = createI18n({
  locale: "en",
  legacy: false,
  messages: { // add your messages here
    en: {
      common: {
        message: "Hello world!",
      },
    },
  },
});

createApp(App).use(i18n).mount("#app");

现在你可以在你的项目中使用$t和useI18n，下面是如何做到这一点：
在您的App.vue中：

<template>
  <HelloWorld msg="common.message"/> <!-- The traduction key -->
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import HelloWorld from './components/HelloWorld.vue';

@Options({
  components: {
    HelloWorld,
  },
})
export default class App extends Vue {}
</script>

现在在组件HelloWorld.vue中，有两种使用方法：

<template>
  <div>
    <h1>{{ $t(msg) }}</h1>
    <h2>{{ i18n.t('common.message') }}</h2>
  </div>
</template>

<script lang="ts">
import { Options, Vue, setup } from 'vue-class-component';
import { useI18n } from 'vue-i18n'

@Options({
  props: {
    msg: String
  }
})
export default class HelloWorld extends Vue {
  msg!: string      

  i18n = setup(() => {
    return useI18n()
  })
}
</script>

我强烈建议你不要使用vue-class-component，而是更多地使用composition API与Vue3和Typescript。
希望对你有帮助：）