Hydration text content mismatch

[oleksandr-dukhovnyy]

Setup

- Operating System: Windows_NT
- Node Version:     v20.10.0
- Nuxt Version:     3.8.0
- CLI Version:      3.9.1
- Nitro Version:    2.7.2
- Package Manager:  [email protected]
- Builder:          -
- User Config:      app, devtools, css, telemetry, modules, i18n, devServer, build, routeRules, vite, hooks
- Runtime Modules:  @pinia/[email protected], @nuxtjs/[email protected]
- Build Modules:    -

I have an error

[Vue warn]: Hydration text content mismatch in <span>:
- Server rendered: filters.man
- Client rendered: Man 

Component

<template>
  <nav class="nav">
    <span
      v-for="navItem in navItems"
      :key="navItem"
      @click="selectCategory(navItem)"
    >
      {{ $t(`filters.${navItem}`) }}
    </span>
  </nav>
</template>

nuxt.config.ts

  i18n: {
    locales: [
      {
        code: 'en-US',
        file: 'en-US.json',
        isCatchallLocale: true,
      },
     // ... other
    ],
    langDir: 'locales',
    defaultLocale: 'en-US',
  },

I want to load & display en-US locale in SSR.
Next, in mounted, i get selected locale from localStorage and set them.
In this case, the user always loads the English locale, even if using another one, but for me this is acceptable.
Help solve the hydration problem.

P. S. It's not acceptable for me to add all localized labels to .