vue i18n

npm install vue-i18n@9

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './assets/css/main.css'
import { createI18n } from 'vue-i18n'
import ko from '@/locales/ko.json'
import en from '@/locales/en.json'

const messages = {
    ko: ko,
    en: en
}

const i18n = createI18n({
    locale: 'ko',
    messages
  })
  
const app = createApp(App)

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

      <h1 v-if="!mobile">{{ $t('banner.title') }}</h1>
      <h1 v-else  v-html="$t('banner.m-title')"></h1>

변수에 넣었는데 값이 변하지 않을 때

  watch: {
    '$i18n.locale': {
      handler() {
        this.title = this.$t('banner.title')
      },
      immediate: true
    }
  },