Data Binds in duplicate components



  • i have this component called dynamicFields:

    <template>
    <div ref="Component">
      <q-input type="text" v-model="fieldName" stack-label="Nome do Campo" align="center"/>
      <q-select
        stack-label="Tipo de Campo"
        inverted-light
        color="amber"
        v-model="select"
        :options="typeFields"
        style="width:100%"
        slot="field"
      />
        <q-select
      stack-label="Campo Obrigatorio ?"
      inverted-light
      color="amber"
      v-model="isRequired"
      :options="required"
      style="width:100%"
      />
      <q-btn color="deep-orange" label="Remover Campo" style="width:100%"  @click="deleteThis"/>
    </div>
    </template>
    
    <script>
    import { QSelect } from 'quasar'
    export default {
      mixin: [QSelect],
      methods: {
        deleteThis () {
          (this.$el).remove()
        }
      },
      components: {QSelect},
      data () {
        return {
          fieldName: '',
          select: [
            {
              label: 'Texto',
              value: ''
            },
            {
              label: 'Numerico',
              value: ''
    
            },
            {
              label: 'Booleana',
              value: ''
    
            },
            {
              label: 'Select',
              value: ''
    
            },
            {
              label: 'Radio',
              value: ''
    
            }
          ],
          isRequired: [
            {
              value: ''
            }
          ],
          typeFields: [
            {
              label: 'Texto',
              value: ''
            },
            {
              label: 'Numerico',
              value: ''
    
            },
            {
              label: 'Booleana',
              value: ''
    
            },
            {
              label: 'Select',
              value: ''
    
            },
            {
              label: 'Radio',
              value: ''
    
            }
          ],
          required: [
            {
              label: 'Sim',
              value: true
            },
            {
              label: 'Não',
              value: false
            }
          ]
        }
      }
    }
    </script>
    
    <style scoped>
    </style>
    

    so i have my home page, where the user can duplicate de component and add some values.

    <template>
    <q-page>
    <div id="secure">
        <div ref="container"></div>
    <q-btn color="deep-orange" label="Mostrar dados" style="width:100%"  @click="showData"/>
        <q-btn color="deep-orange" label="Adicionar Campo" style="width:50%"   @click="dynamicField"/>
        <q-btn
        color="secondary"
        style="width:50%"
        @click="back">Voltar
        </q-btn>
    </div>
    </q-page>
    </template>
    
    <script>
    import dynamicField from '../components/dynamicFields'
    import Vue from 'vue'
    
    export default {
      name: 'Secure',
      methods: {
        dynamicField () {
          var ComponentClass = Vue.extend(dynamicField)
          var instance = new ComponentClass()
          instance.$mount() // pass nothing
          this.$refs.container.appendChild(instance.$el)
        },
        back () {
          this.$router.push('/')
        },
        showData () {
          console.log(this)
        }
      },
      components: { dynamicField }
    }
    </script>
    
    <style scoped>
    #secure {
      background-color: #ffffff;
      border: 1px solid #cccccc;
    }
    </style>
    

    the idea and that the user can create as many times as you want this component, with certain configurations, set the component with a button to auto remove, and a function to create the component as many times as necessary.
    I can not find a correct way to get the date of these components, I was thinking of using a Store with vuex, is there any way to achieve this goal?