formFields not working in Vue 3.2.22

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Vue

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

# Put output below this line

  System:
    OS: Linux 5.11 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (4) x64 11th Gen Intel(R) Core(TM) i3-1115G4 @ 3.00GHz
    Memory: 1.13 GB / 7.46 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 17.1.0 - ~/.nvm/versions/node/v17.1.0/bin/node
    npm: 8.1.2 - ~/.nvm/versions/node/v17.1.0/bin/npm
  Browsers:
    Chrome: 95.0.4638.69
    Firefox: 94.0
  npmPackages:
    @aws-amplify/ui-components: ^1.9.4 => 1.9.4 
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.15 
    @vue/cli-service: ~4.5.0 => 4.5.15 
    @vue/compiler-sfc: ^3.0.0 => 3.2.22 
    amplify-ui-components-loader:  undefined ()
    aws-amplify: ^4.3.6 => 4.3.6 
    core-js: ^3.6.5 => 3.19.1 
    vue: ^3.0.0 => 3.2.22 
  npmGlobalPackages:
    @vue/cli-service-global: 4.5.15
    @vue/cli: 4.5.15
    corepack: 0.10.0
    npm: 8.1.2
    vue-language-server: 0.0.67

Describe the bug

The :formFields="formFieldFromData" fails to initalise the autentication components correctly when mounted;

Expected behavior

form fields are configured according to the bound data object; standard configuration is shown instead

Reproduction steps

1. export NODE_OPTIONS=--openssl-legacy-provider
2. vue create newproject
3. (in project dir) npm install aws-amplify @aws-amplify/ui-components
4. setup amplify project according to the vue code snippet in pre-build
5. use the formFields prop to configure the amplify-sign-in form
6. serve the app locally npm run serve (from package.json: vue-cli-service serve)
7. amplify vue component use the default form configuration instead of the one passed with formFields
8. any event that modify the formFields after mounting of the compponent will trigger a re-rendering that uses the formFields correctly

Code Snippet

/src/main.js

Amplify.configure({
    Auth: { ... }
})

// https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/#option-1-use-pre-built-ui-components
import {
    applyPolyfills,
    defineCustomElements,
} from '@aws-amplify/ui-components/loader';

applyPolyfills().then(() => {
    defineCustomElements(window);
});

App.vue

<template>

<button @click="updateForm">Update Signup</button>
<amplify-authenticator>
  <amplify-sign-up
    slot="sign-up"
    username-alias="email"
    :formFields="SignupForm"
    >
  </amplify-sign-up>
  <amplify-sign-in
    slot="sign-in"
    username-alias="email"
    :formFields="SignupForm"
    >
  </amplify-sign-in>
</amplify-authenticator>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
    name: 'App',
    data () {
	return {
	    SignupForm: [
		{
		    type: 'email',
		    label: 'Custom Email (data)',
		    placeholder: 'Custom email placeholder',
		    inputProps: { required: true, autocomplete: 'username' },
		},
	    ]
	}
    },
    methods: {
	updateForm() {
	    console.log("updating...")
	    this.SignupForm = [
		{
		    type: 'email',
		    label: 'Custom Email (button)',
		    placeholder: 'Custom email placeholder',
		    inputProps: { required: true, autocomplete: 'username' },
		},
	    ]
	}
    }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

{
    Auth: {
	region: 'us-east-1',
	userPoolId: 'us-east-1_XXXXXXXXX',
	userPoolWebClientId: '76ulnjrmfcpsn6gkXXXXXXXXXX',
	cookieStorage: {
	    domain: '.mydomain.net',
	    path: '/',
	    expires: 365,
	    sameSite: "strict",
	    secure: true
	},
	authenticationFlowType: 'USER_PASSWORD_AUTH',
    }
}

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[ErikCH]

@ltrojan Let me know!

You can certainly continue to use our ui-components library! And when you feel ready you can look at switching over. Very shortly we will be removing the preview from the new authenticator.

[Milan-Shah]

@ltrojan We have released a major version for @aws-amplify/ui-react@2.1.0 and have rebuilt Authenticator UI component. It offers many features like custom styling, sign up attributes, zero-config, password manager support, social sign in and parity across all of our web frameworks. We have started the implementation for Flutter and RN already which will be released in upcoming few weeks!

If you have any suggestions for improvements or have any issues, please let us know. We are here to help 😃

I will go ahead and close the issue for now!