vue-formulate fieldset for capturing slot data in a named subgroup object rather than array

FormulateFieldset.vue

<template>
  <FormulateSlot
    name="grouping"
    :class="context.classes.grouping"
    :context="context">

    <FormulateRepeatableProvider
      :index="0"
      :set-field-value="(field, value) => setFieldValue(field, value)"
      :context="context"
      :uuid="uuid">
      <slot />
    </FormulateRepeatableProvider>
  </FormulateSlot>
</template>

<script>
import { setId } from '@braid/vue-formulate/src/libs/utils'
import isObject from 'isobject'

export default {
  name: 'FormulateFieldset',
  props: {
    context: {
      type: Object,
      required: true
    }
  },
  provide () {
    return {
      isSubField: () => true,
      registerProvider: this.registerProvider,
      deregisterProvider: this.deregisterProvider
    }
  },
  data () {
    return {
      providers: []
    }
  },
  inject: ['formulateRegisterRule', 'formulateRemoveRule'],
  computed: {
    // Probably wrong
    uuid () {
      return setId({}).__id
    },
    formShouldShowErrors () {
      return this.context.formShouldShowErrors
    }
  },
  watch: {
    providers () {
      if (this.formShouldShowErrors) {
        this.showErrors()
      }
    },
    formShouldShowErrors (val) {
      if (val) {
        this.showErrors()
      }
    }
  },
  created () {
    // We register with an error message of 'true' which causes the validation to fail but no message output.
    this.formulateRegisterRule(this.validateGroup.bind(this), [], 'formulateGrouping', true)
  },
  destroyed () {
    this.formulateRemoveRule('formulateGrouping')
  },
  methods: {
    setFieldValue (field, value) {
      this.context.model = isObject(this.context.model) ? this.context.model : setId({})
      this.context.model[field] = value
    },
    validateGroup () {
      return Promise.all(this.providers.reduce((resolvers, provider) => {
        if (provider && typeof provider.hasValidationErrors === 'function') {
          resolvers.push(provider.hasValidationErrors())
        }
        return resolvers
      }, [])).then(providersHasErrors => !providersHasErrors.some(hasErrors => !!hasErrors))
    },
    showErrors () {
      this.providers.forEach(p => p && typeof p.showErrors === 'function' && p.showErrors())
    },
    registerProvider (provider) {
      if (!this.providers.some(p => p === provider)) {
        this.providers.push(provider)
      }
    },
    deregisterProvider (provider) {
      this.providers = this.providers.filter(p => p !== provider)
    }
  }
}
</script>

Usage.vue

<FormulateInput
  type="fieldset"
  name="groupName">
  <FormulateInput type="text" name="someField" />
</FormulateInput>

<!-- 
Results in:
{ groupName: { someField: "Hello, World" } }
-->

vue-formulate-config.js

Vue.component('FormulateFieldSet', FormulateFieldSet)

Vue.use(VueFormulate, {
  library: {
    fieldset: {
      classification: 'fieldset',
      component: 'FormulateFieldset',
      slotProps: {
        component: ['name'] // maybe unnecessary?
      }
    }
  }
})