Data Binds in duplicate components

[jorgenogueira]

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?