huge hydration mismatch, elements are being rendered in the wrong divs

<template>
  <FontsLoader/>
  <ResourceBar v-if="auth.loggedIn"/>
  <div class="header">
    <span class="gameTitle">TotalControl - Strategy Enhanced</span>

    <div class="headerControls">
<!--      <ActionMenu/>-->
    </div>
  </div>
  <div class="bodyWrapper">
    <div class="body">
      <AuthComponent v-if="!displayBody"/>
      <slot v-else/>
    </div>
  </div>
  <div class="footer">

  </div>
</template>

<template>
  <FontsLoader/>
  <ResourceBar v-if="auth.loggedIn"/>
  <div class="header">
    <span class="gameTitle">TotalControl - Strategy Enhanced</span>

    <div class="headerControls">
<!--      <ActionMenu/>-->
    </div>
  </div>
  <div class="bodyWrapper">
    <div class="body">
      <AuthComponent v-if="!displayBody"/>
      <slot v-else/>
    </div>
  </div>
  <div class="footer">

  </div>
</template>