diff --git a/src/components/cylc/Mutation.vue b/src/components/cylc/Mutation.vue
index 3929cd733..0c680a5d6 100644
--- a/src/components/cylc/Mutation.vue
+++ b/src/components/cylc/Mutation.vue
@@ -70,7 +70,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         v-bind="{
           mutation,
           types,
-          callbackSubmit: call,
           initialData
         }"
         ref="form"
@@ -104,7 +103,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <v-btn
               text
               :color="isValid ? 'primary' : 'error'"
-              @click="$refs.form.submit()"
+              @click="submit"
               v-bind="attrs"
               v-on="on"
               data-cy="submit"
@@ -132,27 +131,24 @@ import EditRuntimeForm from '@/components/graphqlFormGenerator/EditRuntimeForm.v
 import Markdown from '@/components/Markdown'
 import Task from '@/components/cylc/Task.vue'
 import {
-  mutate,
   getMutationShortDesc,
   getMutationExtendedDesc
 } from '@/utils/aotf'
 
 // enumeration for the mutation status, maps onto Cylc Task status
-const status = {
+const status = Object.freeze({
   waiting: 'waiting',
   submitted: 'submitted',
   succeeded: 'succeeded',
   failed: 'failed',
   submitFailed: 'submit-failed'
-}
-Object.freeze(status)
+})
 
 // initial state defined here so we can easily reset the component data
-const initialState = {
+const initialState = Object.freeze({
   response: '',
   status: status.waiting
-}
-Object.freeze(initialState)
+})
 
 export default {
   name: 'mutation',
@@ -209,14 +205,10 @@ export default {
 
   methods: {
     /* Execute the GraphQL mutation */
-    async call (args) {
+    submit () {
       this.status = status.submitted
-      mutate(
-        this.mutation,
-        args,
-        this.$workflowService.apolloClient
-      ).then(response => {
-        this.status = response.status.name.replace('_', '-')
+      this.$refs.form.submit().then(({ status }) => {
+        this.status = status.name.replace('_', '-')
       })
     }
   }
diff --git a/src/components/graphqlFormGenerator/EditRuntimeForm.vue b/src/components/graphqlFormGenerator/EditRuntimeForm.vue
index 353507b0f..a73917100 100644
--- a/src/components/graphqlFormGenerator/EditRuntimeForm.vue
+++ b/src/components/graphqlFormGenerator/EditRuntimeForm.vue
@@ -170,11 +170,15 @@ export default {
         workflows: [tokens.workflow_id]
       }
       const mutation = await this.$workflowService.getMutation('broadcast')
-      await mutate(
+      const response = await mutate(
         mutation,
         args,
         this.$workflowService.apolloClient
       )
+      // Reset after submission (no need to await)
+      // TODO: remove this if we decide to auto close mutation forms on submission
+      this.reset()
+      return response
     },
 
     /**
diff --git a/src/components/graphqlFormGenerator/FormGenerator.vue b/src/components/graphqlFormGenerator/FormGenerator.vue
index 469020f57..2f1f8ccb8 100644
--- a/src/components/graphqlFormGenerator/FormGenerator.vue
+++ b/src/components/graphqlFormGenerator/FormGenerator.vue
@@ -65,7 +65,7 @@ import { mdiHelpCircleOutline } from '@mdi/js'
 
 import Markdown from '@/components/Markdown'
 import FormInput from '@/components/graphqlFormGenerator/FormInput'
-import { getNullValue } from '@/utils/aotf'
+import { getNullValue, mutate } from '@/utils/aotf'
 
 export default {
   name: 'form-generator',
@@ -92,10 +92,6 @@ export default {
     },
     initialData: {
       type: Object
-    },
-    callbackSubmit: {
-      // called when the user submits the form
-      type: Function
     }
   },
 
@@ -162,10 +158,12 @@ export default {
       this.model = model
     },
 
-    submit () {
-      if (this.callbackSubmit) {
-        this.callbackSubmit(this.model)
-      }
+    async submit () {
+      return await mutate(
+        this.mutation,
+        this.model,
+        this.$workflowService.apolloClient
+      )
     }
   }
 }