Fix TypeError in cylc message mutation form

Author: MetRonnie

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"
@@ -78,16 +78,20 @@ export default {
 
   inheritAttrs: false,
 
+  created () {
+    this.model ??= []
+  },
+
   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)
+        this.model.unshift(newInput)
       } else {
-        index = this.modelValue.length
-        this.modelValue.push(newInput)
+        index = this.model.length
+        this.model.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)
@@ -101,7 +105,7 @@ export default {
 
     /** Remove the item at `index` from the list. */
     remove (index) {
-      this.modelValue.splice(index, 1)
+      this.model.splice(index, 1)
     }
   },