how to merge two reactive arrays between components Vue 3

Question

There are two rective arrays in the two components. One of them is parent, it has a main array, to which you need to add another reactive array from a child component.

---

Home.vue (parent)

<script setup>
import Preview from './Preview.vue';
import Form from './Form.vue';

const person = reactive({
  name: 'John',
  age: 21,
});

const children = ref([]);

const currComponent = shallowRef(Form);

function submit(data) {
  children.value.concat({ ...data });
}

</script>

<template>
  <KeepAlive>
    <component
      :is="currComponent"
      :person="person"
      :children="children"
      @submit="submit"
    ></component>
  </KeepAlive>
</template>

---

Form.vue (child)

<script setup>
const emit = defineEmits(['addChild', 'deleteChild', 'submit']);

const props = defineProps({
  person: {
    type: Object,
  },
  children: {
    type: Array,
  },
});


const childrenArr = ref([]);

const person = reactive({
  name: 'person',
  age: 23,
});

const child = reactive({
  name: 'child',
  age: 10,
});

const showForm = ref(false);

function submit() {
  console.log('submit from FORM: ', childrenArr.value);
  emit('submit', {
    ...childrenArr.value,
  });
}

function addChild() {
  if (childrenArr.value.length < 5) {
    showForm.value = true;
    childrenArr.value.push({
      name: child.name,
      age: child.age,
    });
</script>

<template>
  <div>
    <button v-if="childrenArr.length < 5" @click="addChild" class="add-child">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        class="btn-icon"
      >
        <g id="24px / plus">
          <path
            id="Union"
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M5.13332 10.8556C4.50125 10.8555 3.98887 11.3679 3.98887 12C3.98887 12.6321 4.50126 13.1445 5.13332 13.1445L10.8554 13.1445L10.8554 18.8668C10.8554 19.4989 11.3678 20.0113 11.9999 20.0113C12.632 20.0113 13.1444 19.4989 13.1444 18.8668L13.1443 13.1445L18.8667 13.1445C19.4988 13.1445 20.0112 12.6321 20.0112 12C20.0112 11.3679 19.4988 10.8556 18.8667 10.8556L13.1443 10.8556L13.1443 5.13338C13.1443 4.50132 12.632 3.98893 11.9999 3.98893C11.3678 3.98893 10.8554 4.50131 10.8554 5.13338L10.8554 10.8556L5.13332 10.8556Z"
            fill="#01A7FD"
          />
        </g>
      </svg>
      Add child
    </button>
  </div>
  <div v-if="showForm" v-for="(child, index) in childrenArr" :key="index" class="children-item">
    <div class="children-container">
      <form class="children-form">
        <div class="children-form-group">
          <ChildrenInput v-model="child.name" type="text" class="children-input" />
          <ChildrenLabel class="children-label">Name</ChildrenLabel>
        </div>
        <div class="children-form-group">
          <ChildrenInput v-model="child.age" type="text" class="children-input" />
          <ChildrenLabel class="children-label">Age</ChildrenLabel>
        </div>
      </form>
    </div>
  </div>
</template>

---

Explanations: In the child component (Form.vue), I add new objects from the form to the local reactive array (childrenArr) (this works). I need to pass this array of objects(childrenArr) to the parent component (Home.vue) and merge it to the main array (children), which is located inside the component Home.vue.

In the Home.vue component, I added a function that accepts data from the form child component (function submit(data)). But the array from the child Form.vue component is not added to the array from the Home.vue component.