Struggling with maintaining reactivity in Vue 3 when flattening a nested array of objects. Unfortunately, my attempts result in crashing and browser hang-ups.
In my Vue 3 component, I have an array structured as a list of objects:
this.grouped = [
[this.tokens[0]],
[this.tokens[1]],
[this.tokens[2],this.tokens[3],this.tokens[4]], // nested
[this.tokens[5]]
]
The challenge is to flatten the nested array (at index 2), transforming it into individual objects like so:
this.grouped = [
[this.tokens[0]],
[this.tokens[1]],
[this.tokens[2]], //flattened
[this.tokens[3]], //flattened
[this.tokens[4]], //flattened
[this.tokens[5]]
]
Previous attempts using splice led to loss of reactivity, as depicted in this screenshot. Any suggestions on how to achieve this while preserving reactivity?