Type error using $t ($n, $, d) after update Vue from 3.2.39 to 3.2.40

[felixzapata]

Reporting a bug?

After updating the Vue version to 3.2.40, the $t inside the Vue template files throws a TypeScript typing error:

error TS2339: Property '$t' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<Readonly<ExtractPropTypes<{}>> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHandle; } & ... 5 more ... & Sh..

With the previous version (3.2.39) the type error does not appear.

Expected behavior

No type errors in the Vue files

Reproduction

an "i18n.ts" file:

import { createI18n } from 'vue-i18n';
import type { LocaleMessage } from '@intlify/core-base';
import type { VueMessageType } from 'vue-i18n';
/*
 * All i18n resources specified in the plugin `include` option can be loaded
 * at once using the import syntax
 */
import messages from '@intlify/unplugin-vue-i18n/messages';

export default createI18n({
  locale: 'en-US',
  fallbackLocale: 'en-US',
  legacy: false,
  globalInjection: true,
  messages: messages as { [x: string]: LocaleMessage<VueMessageType>; },
  numberFormats: {
    'en-US': {
      currency: {},
    },
    'es-ES': {
      currency: {},
    },
  },
  datetimeFormats: {
    'en-US': {
      short: {},
    },
    'es-ES': {
      short: {},
    },
  },
});

The main.ts file:

import { createApp } from 'vue';
import type { Component } from 'vue';

import App from './App.vue';
import router from './router';
import i18n from './i18n';

app
  .use(router)
  .use(i18n)
app.mount('#app');

Just a Vue file:

<script setup lang="ts">
defineProps<{
  msg: string;
}>();
</script>

<template>
  <div class="greetings">
    <h1 class="green">
      {{ msg }}
    </h1>
    <h2>
      {{ $t("ok") }}
      {{ $t("next") }}
    </h2>
    <hr>
    <p>{{ $t("messages.hello", { name: "kazupon" }) }}</p>
    <p>{{ $n(1000, "currency") }}</p>
    <p>{{ $d(new Date(), "short") }}</p>
  </div>
</template>

<style scoped>
h1 {
  font-weight: 500;
  font-size: 2.6rem;
  top: -10px;
}

h3 {
  font-size: 1.2rem;
}

.greetings h1,
.greetings h3 {
  text-align: center;
}

@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
}
</style>

System Info

System:
    OS: macOS 11.6.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 103.18 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 18.7.0 - ~/.nvm/versions/node/v18.7.0/bin/node
    Yarn: 3.2.3 - ~/.nvm/versions/node/v18.7.0/bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v18.7.0/bin/npm
  Browsers:
    Chrome: 105.0.5195.125
    Chrome Canary: 108.0.5328.0
    Firefox: 104.0.2
    Safari: 15.5
    Safari Technology Preview: 15.4
  npmPackages:
    @intlify/core-base: 9.2.2 => 9.2.2 
    @intlify/unplugin-vue-i18n: 0.7.0 => 0.7.0 
    @vitejs/plugin-vue: 3.1.0 => 3.1.0 
    @vue/eslint-config-typescript: 11.0.2 => 11.0.2 
    @vue/test-utils: 2.0.2 => 2.0.2 
    @vue/tsconfig: 0.1.3 => 0.1.3 
    vite: 3.1.3 => 3.1.3 
    vitest: 0.23.4 => 0.23.4 
    vue: 3.2.40 => 3.2.40 
    vue-i18n: 9.2.2 => 9.2.2 
    vue-loader: 17.0.0 => 17.0.0 
    vue-router: 4.1.5 => 4.1.5 
    vue-tsc: 0.40.13 => 0.40.13 
    vue3-youtube: 0.1.9 => 0.1.9 

### Screenshot

![Captura de pantalla 2022-09-29 a las 8 46 40](https://user-images.githubusercontent.com/997038/192961427-ca5e54d8-7ae7-4f68-b364-9fec0ab7c978.png)


### Additional context

We maybe have a "fix" for this problem using "t" (importing the function from the package) but I think this is not the valid solution and it is weird that it just stops working after a Vue patch update.

By the way, we are using "typescript": "4.8.4",

### Validations

- [X] Read the [Contributing Guidelines](https://github.com/intlify/vue-i18n-next/blob/master/.github/CONTRIBUTING.md)
- [X] Read the [Documentation](https://vue-i18n.intlify.dev/)
- [X] Check that there isn't [already an issue](https://github.com/intlify/vue-i18n-next/issues) that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/intlify/vue-i18n-next/discussions)
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.

[FlorentinBurgeat]

I have the same issue with the package intlify/nuxt-3 Here: https://github.com/intlify/nuxt3/issues/93

[felixzapata]

In my case, we discovered that we had a problem with our yarn.lock file and it was creating a problem with the versions but I think there is still a problem related to the new Vue version.

[felixzapata]

any update about this issue? We also discovered that if the import explicitly t and we use it instead of $t, it works.

[kazupon]

Sorry, recently, I'm really busy @nuxtjs/i18n and conference preparation (I'm organizer of vue fes japan).

nuxtjs/i18n v8 beta releasing & the conference is over, I will be back on vue-i18n for a bit. Please wait a bit 🙏