When I try to flatten a Vue 3 reactive array of nested objects, I lose their reactivity and my app literally crashes and hangs the browser window.

My Vue 3 component defines an array 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]]
]

I need to take the the 2nd index (where the array nests 3 objects) and flatten it so that the resulting array looks like it would have been defined like this:

this.grouped = [
          [this.tokens[0]],
          [this.tokens[1]],
          [this.tokens[2]], //flattened
          [this.tokens[3]], //flattened
          [this.tokens[4]], //flattened
          [this.tokens[5]]
]

When I try to use splice to do this, the reactivity is lost (example below, showing the lost reactivity. Any ideas how to do it?