[Vuejs]-Flattening multiple reactive arrays looses the reactivity (Array.flat())

Based on the documentation for reactive, you should not be replacing the object you set with the reactive() method.

You should either flatten your data beforehand (when received), then just use that, keep the structure of the data as a Map or use ref instead. Changing the structure (flattening it) when you set it with the reactive() function kills its reactivity.

As stated in their limitations of reactive section:

when we destructure a reactive object’s primitive type property into local variables, or when we pass that property into a function, we will lose the reactivity connection

Due to these limitations, we recommend using ref() as the primary API for declaring reactive state.