Computed list with arrow function inside object not working [closed]

I am using Vue 3.5.13 and I have this computed list:

const entries = computed<Entry[]>(() => {
    const elements = model.value.elements;
    return elements.map((element, index) => {
        return {
            title: "Test" + element.reference,
            config: {
                reference: element.reference,
                onDelete: () => {
                    console.log("Delete", element.reference);
                    onDeleteElement(element.reference);
                },
            },
        };
    });
});

Whenever I am creating a new element, the reference is initially undefined. After sending the request to the backend, the element has a reference. The reference is needed for the onDeleteElement function.

This is happening:

1. Creating an element inside the model (empty reference for the element)
2. Request is sent to the backend (with an empty reference for the element)
3. Get the model from the backend (now with a reference for the element)
4. The computed is executed and updated the title with the reference, but when i call onDelete it still has an empty reference, as seen in the "Delete"-log

I already tried outsourcing the element.reference into a variable before the return and also tried to do this for the onDelete callback, but neither of it works.

Also i tried to create a new list every time the computed is run and pushing the objects into the list, but the same problem occurs.

Handling this inside a watch is also not solving the problem.