UI elements jitter when being conditionally rendered

I’m have an issue where buttons and links jitter on state change (when clicking on the “Sign Out” button). I tried both v-if and v-show and the jitter persists.
Video of the issue: https://www.veed.io/view/89672f51-f55c-411c-883f-440b02cfa4de?panel=share

<div>
  <div>
      <button @click="setColorTheme()">
          <IconDarkMode />
      </button>
      <div v-if="!signedIn && !pending">
          <NuxtLink to="/sign-in">
              <span>Sign In</span>
              <IconSignIn />
          </NuxtLink>
      </div>
  </div>
  <div
      v-if="signedIn && !pending">
      <NuxtLink to="/profile">
          <span>Profile</span>
          <IconProfile />
      </NuxtLink>
      <button to="/sign-in" @click="signOut">
          <span>Sign Out</span>
          <IconSignOut />
      </button>
  </div>
</div>

I also have a 300ms delay for signedIn state in signOut function to wait until page transition ends, but jitter still persists.

if (res.ok) {
    const data = await res.json();
    state.successMessage = data.message;
    if (route.path === '/') {
        window.location.reload();
    } else {
        window.location.href = '/';
    }
    setTimeout(() => {
        state.signedIn = data.signedIn;
    }, 300);
}

Looking for a possible solution.