Store Nested form data to pinia store

Question

Complete beginner to Vue and Pinia. Ive started this course by Piotr Jura and this intro to Pinia aiming to recode an older software of mine done in Laravel only.

From what I have gained, I've tried to implement bits of the software. It is like a Truck drivers Duty record. However, I'm stuck at nested forms. I don't know if this is the best approach to this using the stack Vue->Intertia->Laravel.

I have a parent form "Entries" in Entries page, that contains dynamic child forms. Some template data is passed to this Entries page from a previous page which dictate the number of child forms in Entries Form. (Also there is a button that allows the user to add a blank trip form to enter data that has not been passed. Maybe an addition outside schedule or something)

So the passed template data is receieved in the props of Entries page. and it looks like so;

{
 trip:{
    id:2,
    date:"2023-08-01T00:00:00.000000Z",
    code:"F",
    start:"08:10",
    end:"09:20",
    route:"City1-City2",
    customer:"2143",
    estimate:"1:10",
    remarks:""
 }
 trip:{
    id:3,
    date:"2023-08-01T00:00:00.000000Z",
    code:"F",
    start:"09:30",
    end:"10:00",
    route:"City3-City2",
    customer:"8563",
    estimate:"1:00",
    remarks:""
 }
.... so on
}

And this passed data is then used to fill in the Entries form fields which are similar but not exactly the same as the data passed. This trip collection is used to add a simple form with route, actual driving time, and some other similar fields within the main form.

And I have managed to do that. Now where I am stuck is, the trips are the child forms in the entries page. The main Save Record button is in the Parent form - Entries Form. What I had in mind was when the data is updated by the user in the Child forms, similar to how reactive data is used in useForm:

const mroute= useForm({
    date: dynamicDate, //computed var
    reg: null,
    origin: origin, //computed var
    dest: dest, //computed var
    total: null,
    night: null,
})

and pass the mroute to and routes array which each trip child form will send data to. The pinia store is setup like this:

export const useEntryStore = defineStore("entryStore", {
    state: () => ({
        drivingTime: null, // parentform field
        dutyTime: null,  // parentform field
        nightTimeTotal: null,  // parentform field
        date: null, // parentform field
        routes: [], // from all of the child forms
    }),
    getters: {
        
    },
    actions: {
        
    },
});

So this way I can then fetch the data inside the parent form, populate a single useForm object and send the data to backend. I have no idea how to pass the mroute to the pinia store and still have it reflect any changes the user brings to the child form feilds.

Any help on how to go about this or if this isnt the best way, recommendations on a better way is appriciated!