When I sign up account MFA qr code always show ''Loading...''

[lee56560]

When I sign up account , setup totp qr code always show Loading... .
so I back to sign in, totp qr code will normal display, I don't know why? how can I do fix it?

<template>
  <authenticator :sign-up-attributes="['email','name', 'phone_number']">

    <template v-slot:sign-up-header>
      <h3 class="amplify-heading" style="padding: var(--amplify-space-xl) 0 0 var(--amplify-space-xl)">
        Create a new account
      </h3>
    </template>

    <template v-slot:header>
      <div style="padding: var(--amplify-space-large); text-align: center">
        <img class="amplify-image" alt="Amplify logo" src="https://docs.amplify.aws/assets/logo-dark.svg" />
      </div>
    </template>

    <template v-slot:sign-in-header>
      <h3 class="amplify-heading" style="padding: var(--amplify-space-xl) 0 0 var(--amplify-space-xl)">
        Sign in to your account
      </h3>
    </template>

    <template v-slot="{ user, signOut }">
      <router-view v-if="isRouterAlive" />
    </template>

    <template v-slot:footer>
      <div style="padding: var(--amplify-space-large); text-align: center">
        <p class="amplify-text" style="color: var(--amplify-colors-neutral-80)">
          © All Rights Reserved
        </p>
      </div>
    </template>
    
    <template v-slot:set-up-Totp>

    </template>

  </authenticator>
</template>

<script setup>
import { ref, toRefs, provide, nextTick } from 'vue';
import { Authenticator, useAuthenticator } from '@aws-amplify/ui-vue';


const { signOut } = toRefs(useAuthenticator());

const isRouterAlive = ref(true);


const reload = () => {
  isRouterAlive.value = false;
  nextTick(() => {
    isRouterAlive.value = true;
  })
}

provide("reload", reload);
provide("signout", signOut);


</script>

[calebpollman]

@lee56560 Thanks for raising this issue. Was able to reproduce and looking in to a fix