[Vue warn]: Hydration text content mismatch in <div>,<span> etc. after page reload, not working cookie

[dmitryT93]

Version

@nuxtjs/i18n": "npm:@nuxtjs/[email protected]" nuxt: 3.0.0-rc.1

Nuxt configuration

Please change to [x] if relevant for this issue:

• [ ] Applies to a site deployed to a static server (site generated with nuxt generate)
• [ ] Applies to a site deployed to a server with a Node backend

@nuxtjs/i18n configuration

i18n: {
    detectBrowserLanguage: {
        useCookie: true,
        cookieCrossOrigin: true
    },
    langDir: 'locales/',
    locales: [
        {
            iso: 'en-US',
            code: 'en',
            file: 'en.json',
        },
        {
            iso: 'ua-UA',
            code: 'ua',
            file: 'ua.json',
        },
    ],
    lazy: true,
    defaultLocale: 'en',
    vueI18n: {
        legacy: false,
        fallbackLocale: { en: ['ua'], ua: ['en'] },
        locale: 'en',
    },
},

What is Expected?

After reload on any page on second language ('ua') I expect loading element with same language as before reload

What is actually happening?

After reload I got many notifications ([warn]: Hydration text content mismatch in ...) and the text is displayed on 'en' language. If I change language localy and go through the pages all good, but after reload something is going wrong. Also have problem with cookie i18n_redirected, I don't see it in my browser cookies

Thanks!