Vuejs and HTML creating a complex JSON Object dynamically and displaying the same to user using V-for

I am developing a Vuejs application within which I have a field. For this field, users can provide the values and this field expands dynamically based on the user-provided values.

The field name is extensions, initially an Add Extension button will be displayed. With on click of the button, a bootstrap modal will be displayed which has 3 fields: namespace (text), localname (text), datatype(dropdown: string/complex). If the datatype is string then a simple text field will be displayed. However, if the datatype is complex then another button should be displayed and with on click of the button again the same modal is displayed with fields and the process continues. So the created JSON based on this will expand horizontally and vertically.

I am able to complete the first iteration and display the elements to users on the front end. However, for further iteration, I am not understanding how to achieve it using the recursive approach. Since I don’t know how many times users may create the extensions I need to have an approach that dynamically does this.

Can someone please help me how to create and display the JSONarray using Vuejs which expands horizontally and vertically?

Following is the code I have so far:

<template>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-3">
        <span>Extensions</span>
        <button class="form-control" @click="createExtensions()">
          Add Another
        </button>
      </div>
    </div>

    <div v-for="extension in extensionList" :key="extension.ID" class="form-inline">
      <span>{{ extension.namespace+ ":"+extension.localName }}</span>
      <input v-if="extension.dataType == 'string'" type="text" @input="AddExtensionText($event,extension.ID)">
      <button v-if="extension.dataType == 'complex'" @click="AddComplextExtension(extension.ID)">
        Add another
      </button>
    </div>

    <b-modal
      id="Extension"
      title="Add Another Element"
      size="lg"
      width="100%"
      :visible="showModal"
    >
      <b-form id="AddExtension" @submit.prevent="submitExtension">
        <div class="form-group">
          <label for="message-text" class="col-form-label">Namespace URI:</label>
          <input
            v-model="extension.namespace"
            type="text"
            class="form-control"
            required
          >
        </div>
        <div class="form-group">
          <label for="message-text" class="col-form-label">Local Name:</label>
          <input
            v-model="extension.localName"
            type="text"
            class="form-control"
            required
          >
        </div>
        <div class="form-group">
          <label for="AddExtensionDataType" class="col-form-label">Data Type:</label>
          <b-form-select v-model="extension.dataType" class="form-control">
            <b-form-select-option value="string">
              String
            </b-form-select-option>
            <b-form-select-option value="complex">
              Complex
            </b-form-select-option>
          </b-form-select>
        </div>
      </b-form>
      <template #modal-footer="{ cancel }">
        <b-btn @click="cancel">
          Cancel
        </b-btn>
        <b-btn variant="primary" type="submit" form="AddExtension">
          OK
        </b-btn>
      </template>
    </b-modal>
  </div>
</template>

<script>

export default {
  data () {
    return {
      extensionList: [],
      extensionCount: 0,
      extension: {
        namespace: '',
        localName: '',
        dataType: 'string'
      },
      showModal: false
    }
  },
  methods: {
    // Method to create extensions and add
    createExtensions () {
      this.showModal = true
    },

    // Function to submit the each extension
    submitExtension () {
      this.showModal = false
      const extensionObj = {}
      extensionObj.ID = this.extensionCount
      extensionObj.namespace = this.extension.namespace
      extensionObj.localName = this.extension.localName
      extensionObj.dataType = this.extension.dataType
      this.extensionList.push(extensionObj)
      this.extensionCount++
    },

    // On addition of the input field value update List
    AddExtensionText (event, extensionID) {
      const extension = this.extensionList.filter(ex => ex.ID === extensionID)[0]
      if (typeof extension !== 'undefined') {
        extension.text = (typeof event.target.value !== 'undefined') ? event.target.value : ''
      }
    },

    // Add complex extension
    AddComplextExtension (extensionID) {
      this.showModal = true
    }
  }
}
</script>

<style>

</style>

This is the initial field I have:

enter image description here

This is what I want to achieve where everything is created dynamically and JSON expands both horizontally and vertically:

enter image description here