Error "The client-side... DOM tree is not matching server-rendered content." when using v-if="!$apollo.loading". What is the possible reason?

Question

JavaScript

Error when using nuxt-apollo module

client.js:730 [Vue warn]: 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 <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

While localizing it, I found out what appears when using v-if="!$apollo.loading"

What is the possible reason? How to correctly render TheHeader after loading data via Apollo?

Simplified example:

// dafault.vue
<template>
   <div>
      <!-- Если убрать v-if="!$apollo.loading" проблема пропадает -->
      <TheHeader v-if="!$apollo.loading" />
   </div>
</template>

<script>
import gql from 'graphql-tag';
import TheHeader from '~/components/TheHeader';

export default {
   components: {
      TheHeader,
   },

   apollo: {
      categories: {
         query: gql`
            query {
               categories {
                  id
                  label
                  url
               }
            }
         `,
         update: (data) => data.categories,
      },
   },
};
</script>

// TheHeader.vue
<template>
   <div>header</div>
</template>