Investigate :key in GlFormFields

The following discussion from gitlab-org/gitlab-ui!3982 (merged) should be addressed:

• @pslaughter started a discussion: (+1 comment)

  issue (minor,non-blocking): I know there was a conversation about losing the key here. I created a small patch to test out the possible re-rendering effect in storybook. It looks like there's a small side-effect of the focus being lost when a field is added above the current one.

  Patch

  diff --git a/src/components/base/form/form_fields/form_fields.stories.js b/src/components/base/form/form_fields/form_fields.stories.js
  index 6a2bba9d2..0df2fdffe 100644
  --- a/src/components/base/form/form_fields/form_fields.stories.js
  +++ b/src/components/base/form/form_fields/form_fields.stories.js
  @@ -56,6 +56,23 @@ const Template = () => ({
         loading: false,
       };
     },
  +  created() {
  +    let extraFieldId = 1;
  +
  +    setInterval(() => {
  +      const fieldId = extraFieldId;
  +      const fieldName = `extraField${fieldId}`;
  +
  +      extraFieldId += 1;
  +
  +      this.fields = {
  +        [fieldName]: {
  +          label: `Extra Field ${fieldId}`,
  +        },
  +        ...this.fields,
  +      };
  +    }, 10000);
  +  },
     computed: {
       values() {
         return omit(this.formValues, ['confirmPassword']);
  
  

  Side effect video

  bug_adding_field_above_gitlab_ui

  I'm not super concerned about this issue, but I'm a little concerned that there are side-effects of losing the key, and I'm really not sure to what extent. What's the worst case scenario here?

See gitlab-org/gitlab-ui!3982 (comment 1794398889) for more context

Possible solutions

1. Use Vue 2 syntax and ignore Vue 3 tests for GlFormFields
2. Write a custom template parser that converts key syntax to Vue 3 for those tests