diff --git a/src/components/graphqlFormGenerator/FormInput.vue b/src/components/graphqlFormGenerator/FormInput.vue
index f01d0f86c..6b9726a78 100644
--- a/src/components/graphqlFormGenerator/FormInput.vue
+++ b/src/components/graphqlFormGenerator/FormInput.vue
@@ -20,113 +20,94 @@ This is a convenience component that wraps an input component, allowing
 dynamically created inputs.
 -->
 
-<script>
-import { h, mergeProps } from 'vue'
+<template>
+  <component
+    :is="inputProps.is"
+    v-bind="inputProps"
+    v-model="model"
+    :gqlType="gqlType"
+    :types="types"
+    v-mask="inputProps.mask"
+  >
+    <template
+      v-if="help"
+      v-slot:append-inner
+    >
+      <v-tooltip>
+        <template v-slot:activator="{ props }">
+          <v-icon
+            v-bind="props"
+            style="cursor: default"
+            :icon="mdiHelpCircleOutline"
+          />
+        </template>
+        <Markdown :markdown="help" />
+      </v-tooltip>
+    </template>
+    <!-- pass the "append" slot onto the child component -->
+    <template v-slot:append="slotProps">
+      <slot
+        name="append"
+        v-bind="slotProps"
+      />
+    </template>
+  </component>
+</template>
+
+<script setup>
+import { mergeProps, useAttrs } from 'vue'
 import { mask } from 'vue-the-mask'
 import Markdown from '@/components/Markdown.vue'
-import { formElement } from '@/components/graphqlFormGenerator/mixins'
+import { formElementProps, useFormElement } from '@/components/graphqlFormGenerator/mixins'
 import VuetifyConfig, { getComponentProps } from '@/components/graphqlFormGenerator/components/vuetify'
 import { mdiHelpCircleOutline } from '@mdi/js'
 import { VIcon } from 'vuetify/components/VIcon'
 import { VTooltip } from 'vuetify/components/VTooltip'
-import { upperFirst } from 'lodash'
-
-/**
- * Render help icon with tooltip containing help text.
- *
- * @param {string} helpText - (supports markdown)
- */
-export const renderHelpIcon = (helpText) => h(
-  VTooltip,
-  { location: 'bottom' },
-  {
-    activator: ({ props }) => h(
-      VIcon,
-      {
-        ...props,
-        style: {
-          cursor: 'default'
-        }
-      },
-      () => mdiHelpCircleOutline
-    ),
-    default: () => h(Markdown, { markdown: helpText })
-  }
-)
-
-export default {
-  name: 'g-form-input',
 
+defineOptions({
   // Prevent fallthrough attrs overriding the supplied props for the input
   // https://github.com/vuejs/core/issues/6504
   inheritAttrs: false,
+})
 
-  mixins: [formElement],
-
-  components: {
-    Markdown
-  },
-
-  directives: {
-    mask: (el, binding) => {
-      // only use the mask if one is provided, this allows us to use the
-      // mask directive on elements which it doesn't support
-      if (binding.value) {
-        mask(el, binding)
-      }
-    }
-  },
-
-  props: {
-    // dictionary of props for overriding default values
-    propOverrides: {
-      type: Object,
-      default: () => { Object() }
-    }
-  },
-
-  beforeCreate () {
-    // Set the props to pass to the form input. Note, this includes the "is"
-    // prop which tells Vue which component class to use.
-    // TODO: move to rule based system to allow changing
-    //       of parent components based on child types?
-
-    // get the default props for this graphQL type
-    const componentProps = getComponentProps(this.gqlType, VuetifyConfig.namedTypes, VuetifyConfig.kinds)
-
-    // merge this in with default and override props
-    const propGroups = [
-      componentProps,
-      this.propOverrides || {}
-    ]
-    // rules is a list so needs special treatment
-    const rules = propGroups.flatMap(({ rules }) => rules ?? [])
-
-    this.inputProps = mergeProps(this.$attrs, ...propGroups, { rules })
-  },
-
-  render () {
-    // Some components implement custom v-model
-    // (https://v2.vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model)
-    const vModel = this.inputProps.is.options?.model || { prop: 'modelValue', event: 'update:modelValue' }
-    return h(
-      this.inputProps.is,
-      {
-        ...this.inputProps,
-        [vModel.prop]: this.model,
-        [`on${upperFirst(vModel.event)}`]: (value) => {
-          this.model = value
-        },
-        gqlType: this.gqlType,
-        types: this.types
-      },
-      {
-        'append-inner': this.help ? () => renderHelpIcon(this.help) : null,
-        // pass the "append" slot onto the child component
-        append: (slotProps) => this.$slots.append?.(slotProps)
-      }
-    )
-  }
+const attrs = useAttrs()
 
+const vMask = (el, binding) => {
+  // only use the mask if one is provided, this allows us to use the
+  // mask directive on elements which it doesn't support
+  if (binding.value) {
+    mask(el, binding)
+  }
 }
+
+const props = defineProps({
+  ...formElementProps,
+  // dictionary of props for overriding default values
+  propOverrides: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const model = defineModel()
+
+// Set the props to pass to the form input. Note, this includes the "is"
+// prop which tells Vue which component class to use.
+// TODO: move to rule based system to allow changing
+//       of parent components based on child types?
+
+// get the default props for this graphQL type
+const componentProps = getComponentProps(props.gqlType, VuetifyConfig.namedTypes, VuetifyConfig.kinds)
+
+// merge this in with default and override props
+const propGroups = [
+  componentProps,
+  props.propOverrides || {}
+]
+// rules is a list so needs special treatment
+const rules = propGroups.flatMap(({ rules }) => rules ?? [])
+
+const inputProps = mergeProps(attrs, ...propGroups, { rules })
+
+const { help } = useFormElement(props)
 </script>
diff --git a/src/components/graphqlFormGenerator/components/BroadcastSetting.vue b/src/components/graphqlFormGenerator/components/BroadcastSetting.vue
index b0c861605..33a0757ac 100644
--- a/src/components/graphqlFormGenerator/components/BroadcastSetting.vue
+++ b/src/components/graphqlFormGenerator/components/BroadcastSetting.vue
@@ -16,95 +16,112 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <script>
-import { h } from 'vue'
+import { h, ref } from 'vue'
 import { VTextField } from 'vuetify/components/VTextField'
-import { formElement } from '@/components/graphqlFormGenerator/mixins'
-import { renderHelpIcon } from '@/components/graphqlFormGenerator/FormInput.vue'
-import { nonNullRule } from '@/components/graphqlFormGenerator/components/NonNull.vue'
+import { VIcon } from 'vuetify/components/VIcon'
+import { VTooltip } from 'vuetify/components/VTooltip'
+import { mdiHelpCircleOutline } from '@mdi/js'
+import Markdown from '@/components/Markdown.vue'
+import { formElementProps, useFormElement } from '@/components/graphqlFormGenerator/mixins'
+import { RULES } from '@/components/graphqlFormGenerator/components/vuetify'
+
+/**
+ * Split a given string from the left.
+ *
+ * @param {string} string_ - The string to split.
+ * @param {string} separator - The string to split it by.
+ * @param {number} n - The maximum number of times to split the string.
+ * @returns {string[]}
+ */
+function lsplit (string_, separator, n) {
+  const split = string_.split(separator)
+  if (split.length <= n) {
+    return split
+  }
+  return [split.shift(), split.join(separator)]
+}
+
+/** Convert a string 'x=y' into an object { 'x': 'y' } */
+function fromString (string_) {
+  const [lhs, rhs] = lsplit(string_, '=', 2)
+  if (rhs === undefined) {
+    return null
+  }
+  // const [lhs, rhs] = JavaSplit(string_, '=', 2)
+  if (lhs === 'inherit') {
+    return null
+    // return 'ERROR: cannot broadcast inheritance'
+  }
+  const rdict = {}
+  let tail = lhs
+  const re = /^\[([^\]]*)\](.*)$/
+  let sect = null
+  let curDict = rdict
+  let match = null
+  while (tail) {
+    match = tail.match(re)
+    if (match) {
+      sect = match[1]
+      tail = match[2]
+      if (tail) {
+        curDict[sect.trim()] = {}
+        curDict = curDict[sect.trim()]
+      } else {
+        curDict[sect.trim()] = rhs.trim()
+      }
+    } else {
+      curDict[tail.trim()] = rhs.trim()
+      tail = null
+    }
+  }
+  return rdict
+}
+
+const renderHelpIcon = (helpText) => h(
+  VTooltip,
+  { location: 'bottom' },
+  {
+    activator: ({ props }) => h(
+      VIcon,
+      {
+        ...props,
+        style: {
+          cursor: 'default'
+        }
+      },
+      () => mdiHelpCircleOutline
+    ),
+    default: () => h(Markdown, { markdown: helpText })
+  }
+)
 
 export default {
   name: 'g-broadcast-setting',
 
-  mixins: [formElement],
-
   inheritAttrs: false,
 
-  data: () => ({
-    localValue: null
-  }),
+  props: {
+    ...formElementProps,
+    modelValue: {
+      type: Object,
+      required: false,
+    }
+  },
 
-  methods: {
-    /** Split a given string from the left.
-     *
-     * @param {string} string_ - The string to split.
-     * @param {string} separator - The string to split it by.
-     * @param {number} n - The maximum number of times to split the string.
-     * @returns {Array<string>}
-     */
-    lsplit (string_, separator, n) {
-      const split = string_.split(separator)
-      if (split.length <= n) {
-        return split
-      }
-      return [split.shift(), split.join(separator)]
-    },
+  emits: ['update:modelValue'],
 
-    fromString (string_) {
-      const [lhs, rhs] = this.lsplit(string_, '=', 2)
-      if (rhs === undefined) {
-        return null
-      }
-      // const [lhs, rhs] = JavaSplit(string_, '=', 2)
-      if (lhs === 'inherit') {
-        return null
-        // return 'ERROR: cannot broadcast inheritance'
-      }
-      const rdict = {}
-      let tail = lhs
-      const re = /^\[([^\]]*)\](.*)$/
-      let sect = null
-      let curDict = rdict
-      let match = null
-      while (tail) {
-        match = tail.match(re)
-        if (match) {
-          sect = match[1]
-          tail = match[2]
-          if (tail) {
-            curDict[sect.trim()] = {}
-            curDict = curDict[sect.trim()]
-          } else {
-            curDict[sect.trim()] = rhs.trim()
-          }
-        } else {
-          curDict[tail.trim()] = rhs.trim()
-          tail = null
-        }
-      }
-      return rdict
-    },
+  setup (props) {
+    const { help } = useFormElement(props)
 
-    fromObject (object_) {
-      let ptr = object_
-      let ret = ''
-      while (ptr) {
-        const keys = Object.keys(ptr)
-        if (keys && keys.length !== 0) {
-          const key = keys[0]
-          ptr = ptr[key]
-          if (typeof ptr === 'object') {
-            ret += `[${key}]`
-          } else {
-            ret += `${key}=${ptr}`
-            ptr = null
-          }
-        }
-      }
-      return ret
-    },
+    return {
+      help,
+      localValue: ref(null),
+    }
+  },
 
+  methods: {
     isValid (val) {
-      const nonNullOutcome = nonNullRule(val)
+      const nonNullOutcome = RULES.nonNull(val)
       return nonNullOutcome === true
         ? (this.modelValue != null) || 'Invalid'
         : nonNullOutcome
@@ -119,7 +136,7 @@ export default {
         modelValue: this.localValue,
         'onUpdate:modelValue': (val) => {
           this.localValue = val
-          this.$emit('update:modelValue', this.fromString(val))
+          this.$emit('update:modelValue', fromString(val))
         },
         rules: [this.isValid]
       },
diff --git a/src/components/graphqlFormGenerator/components/Enum.vue b/src/components/graphqlFormGenerator/components/Enum.vue
index 304b2addb..bb6623682 100644
--- a/src/components/graphqlFormGenerator/components/Enum.vue
+++ b/src/components/graphqlFormGenerator/components/Enum.vue
@@ -27,36 +27,34 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   />
 </template>
 
-<script>
-import { formElement } from '@/components/graphqlFormGenerator/mixins'
+<script setup>
+import { formElementProps, useFormElement } from '@/components/graphqlFormGenerator/mixins'
+import { computed } from 'vue'
+
+const props = defineProps({
+  ...formElementProps,
+  /** Specify a subset of the type's enum values that will be displayed. */
+  allowedValues: {
+    type: Array,
+    required: false,
+  },
+})
 
-export default {
-  name: 'g-enum',
+const model = defineModel({ type: String, required: true })
 
-  mixins: [formElement],
+const { type } = useFormElement(props)
 
-  props: {
-    /** Specify a subset of the type's enum values that will be displayed. */
-    allowedValues: {
-      type: Array,
-      required: false,
-    },
-  },
+const enumValues = computed(() => {
+  return props.allowedValues?.length
+    ? type.value.enumValues.filter(
+      ({ name }) => props.allowedValues.includes(name)
+    )
+    : type.value.enumValues
+})
 
-  computed: {
-    enumValues () {
-      return this.allowedValues?.length
-        ? this.type.enumValues.filter(
-          ({ name }) => this.allowedValues.includes(name)
-        )
-        : this.type.enumValues
-    },
-
-    itemDesc () {
-      return this.type.enumValues.find(
-        ({ name }) => name === this.modelValue
-      )?.description ?? ''
-    },
-  }
-}
+const itemDesc = computed(
+  () => type.value.enumValues.find(
+    ({ name }) => name === props.modelValue
+  )?.description ?? ''
+)
 </script>
diff --git a/src/components/graphqlFormGenerator/components/List.vue b/src/components/graphqlFormGenerator/components/List.vue
index 8167ee359..68a1b32a7 100644
--- a/src/components/graphqlFormGenerator/components/List.vue
+++ b/src/components/graphqlFormGenerator/components/List.vue
@@ -18,12 +18,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <v-list density="compact">
     <v-list-item
-      v-for="(item, index) in modelValue"
+      v-for="(item, index) in model"
       :key="index"
     >
       <!-- The input -->
       <FormInput
-        v-model="modelValue[index]"
+        v-model="model[index]"
         :gqlType="gqlType.ofType"
         :types="types"
         ref="inputs"
@@ -38,7 +38,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             class="remove-btn"
           >
             <v-icon size="x-large">
-              {{ $options.icons.mdiCloseCircle }}
+              {{ mdiCloseCircle }}
             </v-icon>
           </v-btn>
         </template>
@@ -49,7 +49,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         @click="add()"
         variant="text"
         data-cy="add"
-        :prepend-icon="$options.icons.mdiPlusCircle"
+        :prepend-icon="mdiPlusCircle"
       >
         Add Item
       </v-btn>
@@ -57,57 +57,50 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   </v-list>
 </template>
 
-<script>
-import { formElement } from '@/components/graphqlFormGenerator/mixins'
+<script setup>
+import { nextTick, ref } from 'vue'
+import FormInput from '@/components/graphqlFormGenerator/FormInput.vue'
+import { formElementProps } from '@/components/graphqlFormGenerator/mixins'
 import { getNullValue } from '@/utils/aotf'
 import { mdiPlusCircle, mdiCloseCircle } from '@mdi/js'
 
-export default {
-  name: 'g-list',
+defineOptions({
+  inheritAttrs: false
+})
 
-  mixins: [
-    formElement
-  ],
+const props = defineProps({
+  ...formElementProps,
+  addAtStart: {
+    type: Boolean,
+    default: false
+  }
+})
 
-  props: {
-    addAtStart: {
-      type: Boolean,
-      default: false
-    }
-  },
+const model = defineModel({ type: Array, required: true })
 
-  inheritAttrs: false,
+const inputs = ref([])
 
-  methods: {
-    /** Add an item to the list. */
-    add () {
-      const newInput = getNullValue(this.gqlType.ofType, this.types)
-      let index = 0
-      if (this.addAtStart) {
-        this.modelValue.unshift(newInput)
-      } else {
-        index = this.modelValue.length
-        this.modelValue.push(newInput)
-      }
-      // this is not ideal, but I believe whats happening is the new (wrapper) component is created over the first tick from the new array item
-      // the component content is created over the next tick (including the input)
-      this.$nextTick(() => {
-        this.$nextTick(() => {
-          // get the latest input ref (which is a tooltip for some reason), get its parent, then the input itself and focus() it (if it exists)
-          this.$refs.inputs[index].$el?.parentNode?.querySelector('input')?.focus()
-        })
-      })
-    },
-
-    /** Remove the item at `index` from the list. */
-    remove (index) {
-      this.modelValue.splice(index, 1)
-    }
-  },
+/** Add an item to the list. */
+async function add () {
+  const newInput = getNullValue(props.gqlType.ofType, props.types)
+  let index = 0
+  if (props.addAtStart) {
+    model.value.unshift(newInput)
+  } else {
+    index = model.value.length
+    model.value.push(newInput)
+  }
+  // this is not ideal, but I believe whats happening is the new (wrapper) component is created over the first tick from the new array item
+  // the component content is created over the next tick (including the input)
+  await nextTick()
+  await nextTick()
+  // get the latest input ref (which is a tooltip for some reason), get its parent, then the input itself and focus() it (if it exists)
+  inputs.value[index].$el?.parentNode?.querySelector('input')?.focus()
+}
 
-  icons: {
-    mdiPlusCircle,
-    mdiCloseCircle,
-  },
+/** Remove the item at `index` from the list. */
+function remove (index) {
+  model.value.splice(index, 1)
 }
+
 </script>
diff --git a/src/components/graphqlFormGenerator/components/MapItem.vue b/src/components/graphqlFormGenerator/components/MapItem.vue
index e83dbd2f5..7908922fd 100644
--- a/src/components/graphqlFormGenerator/components/MapItem.vue
+++ b/src/components/graphqlFormGenerator/components/MapItem.vue
@@ -22,69 +22,66 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     class="c-key-val my-1"
     no-gutters
   >
-    <v-col cols="5">
-      <div>
-        <v-text-field
-          placeholder="key"
-          v-model="modelValue.key"
-          :disabled="modelValue.frozenKey"
-          class="c-input-key"
-          v-bind="{ ...$attrs, ...$options.textFieldProps }"
+    <v-defaults-provider :defaults="defaults">
+      <v-col cols="5">
+        <div>
+          <v-text-field
+            placeholder="key"
+            v-model="model.key"
+            :disabled="model.frozenKey"
+            class="c-input-key"
+            v-bind="$attrs"
+          />
+          <v-tooltip v-bind="tooltipProps">
+            <span><code>{{ model.key }}</code><br/>(Pre-existing settings cannot be renamed)</span>
+          </v-tooltip>
+        </div>
+      </v-col>
+      <v-col cols="auto" style="display: inline-block; padding-top: 0.5em;">
+        <span>=</span>
+      </v-col>
+      <v-col>
+        <v-textarea
+        rows="1"
+        auto-grow
+          placeholder="value"
+          v-model="model.value"
+          class="c-input-val"
+          v-bind="$attrs"
+        />
+      </v-col>
+      <v-col cols="auto">
+        <slot
+          name="append"
+          :disabled="model.frozenKey"
         />
         <v-tooltip v-bind="tooltipProps">
-          <span><code>{{ modelValue.key }}</code><br/>(Pre-existing settings cannot be renamed)</span>
+          <span>Pre-existing settings cannot be removed</span>
         </v-tooltip>
-      </div>
-    </v-col>
-    <v-col cols="auto" style="display: inline-block; padding-top: 0.5em;">
-      <span>=</span>
-    </v-col>
-    <v-col>
-      <v-textarea
-        rows="1"
-        auto-grow
-        placeholder="value"
-        v-model="modelValue.value"
-        class="c-input-val"
-        v-bind="{ ...$attrs, ...$options.textFieldProps }"
-      />
-    </v-col>
-    <v-col cols="auto">
-      <slot
-        name="append"
-        :disabled="modelValue.frozenKey"
-      />
-      <v-tooltip v-bind="tooltipProps">
-        <span>Pre-existing settings cannot be removed</span>
-      </v-tooltip>
-    </v-col>
+      </v-col>
+    </v-defaults-provider>
   </v-row>
 </template>
 
-<script>
-import { formElement } from '@/components/graphqlFormGenerator/mixins'
+<script setup>
+import { computed } from 'vue'
 
-export default {
-  name: 'g-map-item',
+defineOptions({
+  inheritAttrs: false,
+})
 
-  mixins: [
-    formElement
-  ],
+const model = defineModel({ required: true })
 
-  inheritAttrs: false,
+const tooltipProps = computed(() => ({
+  location: 'top',
+  disabled: !model.value.frozenKey,
+  openDelay: 400
+}))
 
-  computed: {
-    tooltipProps () {
-      return {
-        location: 'top',
-        disabled: !this.modelValue.frozenKey,
-        openDelay: 400
-      }
-    }
+const defaults = {
+  VTextField: {
+    hideDetails: true,
   },
-
-  textFieldProps: {
-    hideDetails: true
-  }
 }
+
 </script>
diff --git a/src/components/graphqlFormGenerator/components/NonNull.vue b/src/components/graphqlFormGenerator/components/NonNull.vue
index a087389be..5fc94260a 100644
--- a/src/components/graphqlFormGenerator/components/NonNull.vue
+++ b/src/components/graphqlFormGenerator/components/NonNull.vue
@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <FormInput
     v-model="model"
-    :propOverrides="{ rules: [$options.nonNullRule] }"
+    :propOverrides="{ rules: [RULES.nonNull] }"
     :gqlType="gqlType.ofType"
     :types="types"
   >
@@ -29,17 +29,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   </FormInput>
 </template>
 
-<script>
-import { formElement } from '@/components/graphqlFormGenerator/mixins'
+<script setup>
+import FormInput from '@/components/graphqlFormGenerator/FormInput.vue'
+import { formElementProps } from '@/components/graphqlFormGenerator/mixins'
+import { RULES } from '@/components/graphqlFormGenerator/components/vuetify'
 
-/** Disallow empty array/string or nullish */
-export const nonNullRule = (x) => Boolean(x?.length ?? x != null) || 'Required'
+defineProps({
+  ...formElementProps
+})
 
-export default {
-  name: 'g-non-null',
+const model = defineModel({ required: true })
 
-  mixins: [formElement],
-
-  nonNullRule
-}
 </script>
diff --git a/src/components/graphqlFormGenerator/components/Object.vue b/src/components/graphqlFormGenerator/components/Object.vue
index ce56f040c..3de87ac17 100644
--- a/src/components/graphqlFormGenerator/components/Object.vue
+++ b/src/components/graphqlFormGenerator/components/Object.vue
@@ -33,21 +33,23 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   </v-input>
 </template>
 
-<script>
-import { formElement } from '@/components/graphqlFormGenerator/mixins'
-
-export default {
-  name: 'g-input-object',
-
-  mixins: [formElement],
-
-  computed: {
-    inputs () {
-      return this.type.fields.map(field => ({
-        gqlType: field.type,
-        label: field.name
-      }))
-    }
-  }
-}
+<script setup>
+import { computed } from 'vue'
+import FormInput from '@/components/graphqlFormGenerator/FormInput.vue'
+import { formElementProps, useFormElement } from '@/components/graphqlFormGenerator/mixins'
+
+const props = defineProps({
+  ...formElementProps
+})
+
+const model = defineModel({ required: true })
+
+const { type } = useFormElement(props)
+
+const inputs = computed(() => type.value.fields.map(
+  (field) => ({
+    gqlType: field.type,
+    label: field.name
+  })
+))
 </script>
diff --git a/src/components/graphqlFormGenerator/components/vuetify.js b/src/components/graphqlFormGenerator/components/vuetify.js
index a4514638a..caee9e9cb 100644
--- a/src/components/graphqlFormGenerator/components/vuetify.js
+++ b/src/components/graphqlFormGenerator/components/vuetify.js
@@ -19,7 +19,7 @@ import { VSwitch } from 'vuetify/components/VSwitch'
 import { VTextField } from 'vuetify/components/VTextField'
 
 import GEnum from '@/components/graphqlFormGenerator/components/Enum.vue'
-import GNonNull, { nonNullRule } from '@/components/graphqlFormGenerator/components/NonNull.vue'
+import GNonNull from '@/components/graphqlFormGenerator/components/NonNull.vue'
 import GList from '@/components/graphqlFormGenerator/components/List.vue'
 import GObject from '@/components/graphqlFormGenerator/components/Object.vue'
 import GBroadcastSetting from '@/components/graphqlFormGenerator/components/BroadcastSetting.vue'
@@ -39,7 +39,9 @@ export const RE = {
 }
 
 export const RULES = {
-  required: nonNullRule,
+  /** Disallow empty array/string or nullish */
+  nonNull:
+    (x) => Boolean(x?.length ?? x != null) || 'Required',
   integer:
     (x) => (!x || Number.isInteger(x)) || 'Must be integer',
   noSpaces:
diff --git a/src/components/graphqlFormGenerator/mixins.js b/src/components/graphqlFormGenerator/mixins.js
index 1249aae07..803b746c7 100644
--- a/src/components/graphqlFormGenerator/mixins.js
+++ b/src/components/graphqlFormGenerator/mixins.js
@@ -1,4 +1,4 @@
-/**
+/*
  * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
  *
  * This program is free software: you can redistribute it and/or modify
@@ -15,71 +15,35 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import FormInput from '@/components/graphqlFormGenerator/FormInput.vue'
-
-export const formElement = {
-  components: {}, // Filled on created()
+import { computed } from 'vue'
 
-  props: {
-    // the GraphQL type this input represents
-    gqlType: {
-      type: Object,
-      required: true
-    },
-    // array of all GraphQL types in the schema
-    types: {
-      type: Array,
-      default: () => []
-    },
-    // the value (v-model is actually syntactic sugar for this)
-    modelValue: {
-      required: true
-    }
+/**
+ * @type {Record<string, import('vue').Prop>}
+ */
+export const formElementProps = {
+  // the GraphQL type this input represents
+  gqlType: {
+    type: Object,
+    required: true,
   },
-
-  emits: ['update:modelValue'],
-
-  created () {
-    // Avoid problem of circular reference by deferring
-    // the population of $options.components
-    // https://forum.vuejs.org/t/failed-to-resolve-component-when-not-using-hot-swap/113894/2
-    // TODO: FormInput is not needed by all components that use this
-    // mixin; we should replace this mixin with a composable.
-    this.$options.components.FormInput = FormInput
+  // array of all GraphQL types in the schema
+  types: {
+    type: Array,
+    default: () => [],
   },
+}
 
-  computed: {
-    /* The model we pass to the form input.
-     *
-     * Note the v-model approach does not work with nesting out of the box,
-     * you need to capture and propagate "input" events up the component tree
-     * to enable this nested structure of components to share the same model
-     * and be managed by Vue correctly.
-     */
-    model: {
-      get () {
-        return this.modelValue
-      },
-      set (val) {
-        this.$emit('update:modelValue', val)
-      }
-    },
-
-    type () {
-      for (const type of this.types) {
-        if (type.name === this.gqlType.name && type.kind === this.gqlType.kind) {
-          return type
-        }
-      }
-      return null
-    },
-
-    help () {
-      // TODO: provide argument help then default to type help if not found
-      if (this.type && this.type.description) {
-        return this.type.description.trim()
-      }
-      return null
-    }
+export function useFormElement (props) {
+  const type = computed(
+    () => props.types.find(
+      (type) => type.name === props.gqlType.name && type.kind === props.gqlType.kind
+    )
+  )
+  // TODO: provide argument help then default to type help if not found
+  const help = computed(() => type.value?.description?.trim())
+
+  return {
+    help,
+    type,
   }
 }