Reusing form components with props (with field arrays) e.g. tabs

[DrunkenToast]

How should we handle reusing components such as tabpages with forms?
I always get stuck when I want to reuse components with the same form component but a different prop gets passed to it.

<TabPage
    v-if="activeTabData"
    :tab-data="activeTabData"
/>

const { handleSubmit, handleReset, meta, values, validate, resetForm } =
    useForm({
        validationSchema,
        initialValues: computed(() => ({
            props.activeTabData
        }))
    });

watch(
    () => props.activeTabData,
    () => {
        resetForm();
    },
    { immediate: true }
);

For example here in TabPage a useForm with initial values would be used which uses a fieldArray.
However, when switching tabs the content stays the same.

For this I make the initialValues reactive from the props, I watch the props and reset the form that way.
This doesn't work as I expect it however, the array fields don't reset completely (for instance one tab might have 10 items, an another has 5, and then switching again would show 5 filled items, 5 empty items).

(The same happens if I reset my form using resetForm({values: data}) with no initialValues).

For now I just place a :key="activeTabData.id" on the TabPage but this seems like bad practice.

---

Is there a recommended course of action for reusing forms properly with props?

[DrunkenToast]

Something similar to #3934 may be happening, I am unsure however if this is a bug or if I am missing something.