Dynamically generated q-input v-model data binding issue

[NetMango]

Hi All.

I'm really new in Quasar (2.8.4) and Vue3, I've just started to get know with'em. I have to migrate cca 10 year old ExtJs code to this platform in order to achieve our customers a new look and feel and to able to create Android app from the same code base with Cordova.

In the old code we generate every UI elements from JSON response dynamically and and this is to be taken literally: tabs, grids, forms, tree menus, events etc. It's a fully flexible system.

My first issue now is:

I have a test array filled with objects like we used to receive from REST JSON answer:

        const fInputObjects = [{
            value: 'Józsi Bácsi',
            type: 'text',
            name: 'PROP_ugyfker',
            label: 'Ügyfél kereshető',
            hint: 'Ügyfél kereshető bárhol is legyen :)'
        }, {
            value: '987',
            name: 'PROP_a',
            type: 'number',
            label: 'Szám mező label',
            hint: 'Szám mező hint',
            disabled: true
        }, {
            value: 'Valami',
            name: 'PROP_b',
            label: 'Valami mező label',
            hint: 'Valami mező hint'
        }, {
            value: 'Akármi',
            name: 'PROP_c',
            label: 'Akármi mező label',
            hint: 'Akármi mező hint'
        }]

I created an FInputField.vue object:

<template>
  <q-input filled :name="name" :type="type" :label="label" :hint="hint" lazy-rules clearable :disable="disabled" />
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({

  name: 'FInputField',

  props: {
    name: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: 'text'
    },
    label: {
      type: String,
      default: ''
    },
    hint: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  }

})
</script>

And I have a TestForm.vue file to test it:

<template>
    <q-page class="q-pa-lg">

        <q-form ref="dynamicForm" @submit="onSubmit" @reset="onReset" class="q-gutter-md">

            <div v-for="fInputObject in fInputObjects" :key="fInputObject.name">
                <FInputField v-if="fInputObject.type=='text'||fInputObject.type=='number'" v-model="fInputObject.value"
                    v-bind="fInputObject" />
            </div>

            <div>
                <q-btn label="Elküld" type="submit" color="primary" />
                <q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
            </div>

        </q-form>

    </q-page>
</template>

<script>
import { useQuasar } from 'quasar'
import { defineComponent, ref } from 'vue'
import FInputField from 'components/FInputField.vue'


export default defineComponent({

    name: 'DynamicPage',

    components: {
        FInputField
    },

    setup() {

        const $q = useQuasar()
        /* The previous example array */
        const fInputObjects = [.....]


        return {
            onSubmit(event) {
                const formData = new FormData(event.target)
                console.log(formData)
                event.preventDefault()
            },

            onReset() {
                console.log('reset')
            },
            fInputObjects
        }

    }
})

</script>

I know that I have to bind template --> v-model to a JS variable, but I can't achieve this any dynamic way. It works, when i write tests with static variables, but I cannot bind this dynamically. No matter what i try, data never binds to v-model and cannot change and cannot read.

Please help me find the way to this completely different way of thinking, than what I am used to. Thank you.