Из-за чего возникает ошибка в nuxtjs/auth при обращении к this.$auth.loggedIn?

Question

[gler]

Выяснил, что ошибка возникает при обращении к state this.$auth.loggedIn:

The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside , or missing . Bailing hydration and performing full client-side render.

Файл страницы Vue следующего содержания:

<template>
      <div v-if="loggedIn" >
        ...
      </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'NavBar',
  computed: {
    ...mapState('auth', ['loggedIn', 'user'])
  }
}
</script>

<style></style>

После успешной авторизации перемещаюсь по всем страницам проекта без ошибок, но как только обновляю страницу браузером, появляется описанная ошибка выше.

На странице https://auth.nuxtjs.org/api/auth.html#properties указано:

Все свойства являются реактивными. Это означает, что вы можете безопасно использовать их в v-if условиях шаблона Vue .

Т.е. если я правильно понимаю, то можно обращаться к стейту и так:

<div v-if="this.$auth.loggedIn" >
...
</div>

Но и в этом случае тоже появляется ошибка.

Подскажите, пожалуйста, в чем проблема?

Answer 1

[Vearodev]

не уверен, но думаю так делать неправильно, это же корневой элемент компонента

<template>
      <div v-if="loggedIn" >
        ...
      </div>
</template>

Answer 2

[Павел Никитин]

Есть решение?