Form renderer for dynamic forms

FForm.vue

<template>
   <q-page padding>
      <q-form class="q-gutter-md" @submit="mxFormSubmit(model)">
         <f-field-render
            v-for="field in fields"
            :key="field.model"
            :field="field"
            :onInput="(value,field) => onInput(value,field)"
            :model="model"
         />

         <div class="row q-gutter-md">
            <q-btn label="Cancel" outline no-caps
                   :to="{ name: 'collection-list', params: { collection: mxCollection } }" />
            <q-btn label="Reset" outline no-caps type="reset" />
            <q-btn color="primary" label="Save" :loading="mxLoading" no-caps type="submit" />
         </div>
      </q-form>
   </q-page>
</template>

<script>
import { mapGetters } from 'vuex'
import mxCollections from 'src/mixins/mxCollections'
import mxCRUD from 'src/mixins/mxCRUD'
import * as collectionFields from 'src/models/collectionSchema'
import * as fieldDefs from 'src/models/uiFieldDefs'
export default {
   data() {
      return {
         model: {},
      }
   },
   computed: {
      ...mapGetters(['collection/item']),
      op() {
         let op
         let pathArray = this.$route.path.split('/')
         if (pathArray.includes('add')) op = 'add'
         if (pathArray.includes('update')) op = 'update'
         return op
      },
      fields() {
         let fields = {}
         let fieldNames = Object.keys(collectionFields[this.mxCollection][this.op])
         fieldNames.map(name => {
            fields[name] = fieldDefs.defs[name]
         })
         return fields
      },
   },
   methods: {
      initModel() {
         if (this.op === 'update') {
            this.model = {...this['collection/item']({
                  collection: this.mxCollection,
                  collectionId: this.mxCollectionId
            })}
         }
      },
      onInput(value, field) {
         this.$set(this.model, field, value)
      },
   },
   mixins: [mxCollections, mxCRUD],
   components: {
      FFieldRender: () => import('components/FField'),
   },
   mounted() {
      console.log('***** FForm', 'op', this.op, 'field', fieldDefs.defs)
      this.initModel()
   },
}
</script>