[Vue.JS] How to render structure (pass data to descendants)?

Question

Vue.js

There is a similar structure:

var VM = new Vue({
    el: '#app',
    data: {
      arr: [ // массив
        {
          id: "1",
          title: "title1",
          styleclass: "class1",
          tags: [ // вложенный массив
            {
              id: "11",
              title: "title11",
              elements: [ // еще более вложенный массив
                {
                  id: "111",
                  "title": "title111"
                },
                {
                  id: "112",
                  "title": "title112"
                }
              ]
            },
            {
              id: "12",
              title: "title12"
            }
          ]
        }, 
        {
          id: "2",
          title: "title2",
          styleclass: "class2",
          tags: [
            
          ]
        }
      ]
    }
  });

...which should transform into something like this:

<div id='app'>
  <div class='someclass class1'> <!-- массив -->
    <h1>title1</h1>    
    <div class='anotherclass'> <!-- вложенный массив -->
      <h2>title111</h2>      
      <div class='someclass class1'> <!-- еще более вложенный массив -->
        <h3>title111</h3>
        
      </div>      
      <div class='someclass class1'>
        <h3>title112</h3>
        
      </div>
    </div>   
    <div class='anotherclass'>
      <h2>title112</h2>
      
    </div>
  </div>
  <div class='someclass class2'>
    <h1>title2</h1>
  
  </div>
</div>

How to organize components?
P.S. Should there be only one instance of the VUE class in an application? Or does it depend on the task?

Answer 1

And what's the problem, create components)

<div id='app'>
<arr-comp v-for="arrItem in arr" >
  <h1>{{arrItem.title}}</h1>
  <tag-comp v-for="tagItem in arrItem.tags">
     <h2>{{tagItem.title}}</h1>
     <element-comp v-for="elementItem in tagItem.elements">
        <h3>{{elementItem.title}}</h3>
     </element-comp>
  </tag-comp>
</arr-comp>
</div>

The template for each component should look something like this:

<template>
<div>
<slot></slot>
</div>
</template>

ps. There can be any number of instances