Cv-global-action has issue with conditional rendering (v-if)

[SerLinkzero]

Detailed description

Describe in detail the issue you're having.

I try to implement a login button with cv-global-action that is only renders when the user is not logged in. After the user is logged in a profile button should be rendered instead. Below is the template:

<template>
  <cv-header aria-label="Application Header">
    ...
    <template v-slot:header-global>
      <cv-header-global-action
        @click="navigateTo({name: 'Login'})"
        aria-label="Login"
        v-if="!$store.state.isUserLoggedIn"
      >
        <login24 />
      </cv-header-global-action>

      <cv-header-global-action
        @click="navigateTo({name: 'Profile'})"
        aria-label="Profile"
        v-if="$store.state.isUserLoggedIn"
      >
        <user-avatar-filled24 />
      </cv-header-global-action>

    </template>
  </cv-header>
</template>

The login button will be rendered when the page loads. However when the state $store.state.isUserLoggedIn turns true, the profile button is not rendered as expected. Also when the login state is changed to false, the login icon will not be rendered as expected.

Is this a feature request (new component, new icon), a bug, or a general issue?

Possibly a bug.

Is this issue related to a specific component?

cv-header, cv-header-global-action

What did you expect to happen? What happened instead? What would you like to see changed?

What browser are you working in?

Vivaldi 3.3 64-bit on Windows 10 2009

What version of the Carbon Design System are you using?

"@carbon/icons-vue": "^10.17.0",
"@carbon/vue": "^2.31.1"

Additional information

When using slot="header-global" instead of v-slot:header-global the issue doesn't seem to occur. Possibly related to #936