How to render a complex table in Vue.js?

Question

Vue.js

I ran into difficulties trying to render my data in the View template. Yesterday they helped me a lot here, but the task becomes more complicated all the time, and I don’t have enough skill to master it, alas. Somehow these tables are too confusing.
I made a codepen in which all the code is https://codepen.io/anon/pen/GbXzZO
1. At the top is a hardcoded example of how it should look. Those. there is a dynamic nesting of at least 2 levels. How can I do this from my data?
2. It is not entirely clear in what form it is better to present the data? I made two examples testOneand testTwo- which one is better to use to render the table in the form I need? If there is a third best option - suggest, I don't care how to format the data on the back.