Implement dynamic fields inside Analyzer component

* Import dynamic fields component
* Add dynamic fields to Analyzer component template
* Catch event, clone, update entity, emit event

ee/app/assets/javascripts/security_configuration/sast/components/analyzer_configuration.vue

 <script>
-import { GlFormCheckbox } from '@gitlab/ui';
+import { cloneDeep } from 'lodash';
+import { GlFormCheckbox, GlFormGroup } from '@gitlab/ui';
+import DynamicFields from './dynamic_fields.vue';
 import { isValidAnalyzerEntity } from './utils';
 
+
 export default {
   components: {
+    GlFormGroup,
     GlFormCheckbox,
+    DynamicFields,
   },
   model: {
     prop: 'entity',
     event: 'input',
   },
+  data() {
+    return {
+      configurationEntities: cloneDeep(this.entity.configuration),
+    };
+  },  
   props: {
     // SastCiConfigurationAnalyzersEntity from GraphQL endpoint
     entity: {
@@ -23,13 +33,21 @@ export default {
       const entity = { ...this.entity, enabled: value };
       this.$emit('input', entity);
     },
+    onConfigurationUpdate(value) {
+      const entity = { ...this.entity, configuration: formEntities}
+      this.$emit('input', entity)
+    }
   },
 };
 </script>
 
 <template>
-  <gl-form-checkbox :id="entity.name" :checked="entity.enabled" @input="onToggle">
-    <span class="gl-font-weight-bold">{{ entity.label }}</span>
-    <span v-if="entity.description" class="gl-text-gray-500">({{ entity.description }})</span>
-  </gl-form-checkbox>
+  <gl-form-group>
+    <gl-form-checkbox :id="entity.name" :checked="entity.enabled" @input="onToggle">
+      <span class="gl-font-weight-bold">{{ entity.label }}</span>
+      <span v-if="entity.description" class="gl-text-gray-500">({{ entity.description }})</span>
+    </gl-form-checkbox>    
+
+    <dynamic-fields v-model="configurationEntities" @input="onConfigurationUpdate" />
+  </gl-form-group>
 </template>

ee/app/assets/javascripts/security_configuration/sast/components/configuration_form.vue

@@ -6,11 +6,18 @@ import { __, s__ } from '~/locale';
 import axios from '~/lib/utils/axios_utils';
 import { redirectTo } from '~/lib/utils/url_utility';
 import DynamicFields from './dynamic_fields.vue';
+// START TODO: Only for debugging
+import AnalyzerConfiguration from './analyzer_configuration.vue';
+// END TODO
 import { isValidConfigurationEntity } from './utils';
+import analyzer_configurationVue from './analyzer_configuration.vue';
 
 export default {
   components: {
     DynamicFields,
+    // START TODO: Only for debugging
+    AnalyzerConfiguration,
+    // END TODO
     GlAlert,
     GlButton,
   },
@@ -34,6 +41,17 @@ export default {
   data() {
     return {
       formEntities: cloneDeep(this.entities),
+      // START TODO: Only for debugging
+      analyzerEntity: {
+        name: 'name',
+        label: 'label',
+        description: 'description',
+        enabled: true,
+        configuration: [{
+          defaultValue:'def', description: 'desc', field:'foo', type: 'string', value:'val', label: 'label'
+        }]
+      },
+      // END TODO
       hasSubmissionError: false,
       isSubmitting: false,
     };
@@ -81,6 +99,10 @@ export default {
   <form @submit.prevent="onSubmit">
     <dynamic-fields v-model="formEntities" />
 
+    <!-- START TODO: Only for debugging -->
+    <analyzer-configuration v-model="analyzerEntity" />
+    <!-- END TODO -->
+
     <hr />
 
     <gl-alert v-if="hasSubmissionError" class="gl-mb-5" variant="danger" :dismissible="false">{{