How to use "useI18n" on "server/api" directory

Question

I'm using @nuxtjs/i18n version ^8.0.0-beta.7 and here is my nuxt.config.ts:

import en from "./locales/en.json";

export default defineNuxtConfig({
  typescript: { strict: true, shim: false },
  components: true,
  runtimeConfig: {
    //...
  },
  modules: [
    "@nuxtjs/i18n",
    //...
  ],
  vueuse: { ssrHandlers: true },
  i18n: {
    vueI18n: {
      legacy: false,
      locale: "en",
      availableLocales: ["en", "fr"],
      messages: { en },
    },
  },
});

locales/en.json

{
  "foo": "bar"
}

All components inside pages and components are working fine, however when I do the same thing with server/api directory the error occurs:

[nuxt] [request error] [unhandled] [500] useI18n is not defined                                                                         21:49:12  
  at /D:/Projects/saucemoe/.nuxt/dev/index.mjs:547:17
  at /D:/Projects/saucemoe/node_modules/h3/dist/index.mjs:668:47
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  at async Object.handler (/D:/Projects/saucemoe/node_modules/h3/dist/index.mjs:723:19)
  at async Server.toNodeHandle (/D:/Projects/saucemoe/node_modules/h3/dist/index.mjs:798:7)

server/api/test.get.ts

export default defineEventHandler((event) => {
  const { t } = useI18n();
  const foo = t("foo");

  return { foo };
});

But if I add import { useI18n } from "vue-i18n"; I get another error:

[nuxt] [request error] [unhandled] [500] Must be called at the top of a setup function                                                  21:59:08
  at createCompileError (/D:/Projects/saucemoe/node_modules/@intlify/message-compiler/dist/message-compiler.mjs:54:19)
  at createI18nError (/D:/Projects/saucemoe/node_modules/vue-i18n/dist/vue-i18n.mjs:92:12)
  at useI18n (/D:/Projects/saucemoe/node_modules/vue-i18n/dist/vue-i18n.mjs:2229:15)
  at /D:/Projects/saucemoe/.nuxt/dev/index.mjs:548:17
  at /D:/Projects/saucemoe/node_modules/h3/dist/index.mjs:668:47
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  at async Object.handler (/D:/Projects/saucemoe/node_modules/h3/dist/index.mjs:723:19)
  at async Server.toNodeHandle (/D:/Projects/saucemoe/node_modules/h3/dist/index.mjs:798:7)

import { useI18n } from "vue-i18n";

export default defineEventHandler((event) => {
  const { t } = useI18n();
  const foo = t("foo");

  return { foo };
});

So in summary, how can I use useI18n in server/api directory, many thanks.