I'm trying to make i18n in my Vue project, then an error just occur.

Uncaught TypeError: Cannot read properties of undefined (reading 'use')

here is my project tree:

| -- Project
     | -- src
          | -- App.vue
          | -- main.js
          | -- store
               |-- index.js
          | -- lang
               | -- i18n.js
               | -- tw.json
               | -- en.json

i18n.js:

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

import tw from './tw.json';
import en from './en.json';

const i18n = new VueI18n({
    locale: localStorage.getItem('lang') || 'tw',
    messages: { tw, en }
});

export default i18n;

main.js:

...
import i18n from "./lang/i18n";
app.use(i18n);

"vue": "^3.0.0", "vue-i18n": "^8.26.8", Node: v14.18.0