Using FormKit I want to create a form with a list in a list

Question

Using FormKit I want to create a form with a list in a list.

Let's say you have a form where you add one or more childs. And per child you add one ore more toys.

I am struggling how to do this in Vue 3 and FormKit. How would I format this.

You should be able to dynamically add a child and toys. with say plus sign.

I do not want to use the repeater element :)

I had a loop in list, but do not know how to create that one layer deeper.

<script setup lang="ts">
import Swal from 'sweetalert2';

import {useAddressAutocomplete} from "./useAddressAutocomplete";
import {ref, inject, onMounted} from 'vue';

import {token} from '@formkit/utils';

const lisyConfig = inject("config");
const foundationId = inject("foundationId");
const makeToysRequests = async (fields: any) => {
  console.log('fields', fields);
  await new Promise((r) => setTimeout(r, 1000))

  alert(JSON.stringify(fields))
}

const form = ref();
const formRef = ref();

// Just and array of tokens to keep track of the children for rendering the same amount of input groups.
const childItems = ref([{token: token(), requestsPerChild: [{token: token()}]}]);

const addChild = () => {
  childItems.value.push({token: token(), requestsPerChild: [{token: token()}]})
  console.log(childItems.value);
}

const removeItem = (e: any) => {
  console.log('e', e);
  e.preventDefault();
  Swal.fire(...).then((result) => {
    if (result.isConfirmed) {
      const key = e.target.dataset.id;
      childItems.value = childItems.value.filter(item => {
        return item.token !== key;
      })
    }
  });
}


const toktok = ref(token());
onMounted(() => {
  console.info('Form app mounted');
  console.info('form config: ', config);
  // const a = new AmenityRequest();
  // console.info('Amenity request: ', 1);
})
function test() {
  alert("test")
}
</script>
<template>
  <div class="lisy-form-wrapper">
    <h2>{{toktok}}</h2>
    <FormKit type="form"
             ref="formRef"
             v-model="form"
             form-class="-form form-grid"
             id="f_form"
             submit-label="Send childs"
             @submit="makeToysRequests"
             :actions="false"
    >

      <FormKit type="group" name="partner">
        <h2>Parent</h2>
        <!-- address-input-group is used for the locality fields. @see address_autocomplete.ts -->
        <div class="form-grid address-input-group">
          <FormKit type="text"
                   name="firstName"
                   label="Voornaam"
                   validation="required"
                   outer-class="form-grid-column-8"
          ></FormKit>
          <FormKit type="text"
                   name="infix"
                   label="Tussenvoegsel"
                   outer-class="form-grid-column-4"
          ></FormKit>
          <FormKit type="text"
                   name="lastName"
                   label="Achternaam"
                   validation="required"
                   outer-class="form-grid-column-12"
          ></FormKit>
        </div>
      </FormKit>

      <FormKit type="list" name="childrenList">
        <FormKit
          v-for="(child, index) in childItems"
          :key="child.token"
          :id="child.token"
          :name="child.token"
          type="group"
        >
          <div class="lisy-form-child">
            <FormKit v-if="index !== 0" type="button" @click="removeItem" prefix-icon="trash" input-class="btn outline" :data-id="child.token"
                     wrapper-class="btn__wrapper btn__wrapper--right">
              Verwijder
            </FormKit>
            <FormKit
              type="radio"
              name="gender"
              validation="required"
              label="Geslacht"
              :options="{
              jongen: 'Jongen',
              meisje: 'Meisje',
            }"
              required
            />
            <div class="form-grid">
              <FormKit type="text"
                       name="firstName"
                       label="Voornaam"
                       validation="required"
                       outer-class="form-grid-column-5"
              ></FormKit>
              <FormKit type="text"
                       name="infix"
                       label="Tussenvoegsel"
                       outer-class="form-grid-column-2"
              ></FormKit>
              <FormKit type="text"
                       name="lastName"
                       label="Achternaam"
                       validation="required"
                       outer-class="form-grid-column-5"
              ></FormKit>
            </div>
            <FormKit type="date"
                     name="birthdate"
                     label="Geboortedatum"
                     validation="required"
            ></FormKit>

            <FormKit type="list" name="requestsPerChild">
              <FormKit type="textarea"
                       name="voorziening">
                Inner loop.
              </FormKit>
            </FormKit>
          </div>
          <hr>
        </FormKit>
        <FormKit
          type="button"
          @click="addChild"
          prefix-icon="add"
          input-class="btn purple"
          wrapper-class="btn__wrapper btn__wrapper--right"
        >Voeg kind toe</FormKit>
      </FormKit>

    </FormKit>
    <pre style="font-size: small">
      L:{{childItems.length}}
{{form}}
    </pre>
  </div>
</template>
<style lang="scss"></style>