title: Vue Tree flatten array or recursive component
body: <p>Hi guys I'm trying to build Tree component in Vue, I'm having a little doubt now I have already built a recursive component, similar to this one, but more complex with checkboxes, drag drop etc</p>
  <p><a href="https://v2.vuejs.org/v2/examples/tree-view.html" rel="nofollow noreferrer">https://v2.vuejs.org/v2/examples/tree-view.html</a></p>
  <p>But now I'm looking at some samples online and it looks of them are made by flattening nested json and making a Tree out of it</p>
  <p>Like this one:</p>
  <pre><code>https://jsfiddle.net/fernando2684/p0k8szvj/43/
  </code></pre>
  <p>Hi here recursive builds array and then builds Tree out of it</p>
  <pre><code>   recursive(obj, newObj, level, itemId, isExpend) {
        let vm = this;
  
        obj.forEach(function(o) {
          if (o.children &amp;&amp; o.children.length != 0) {
            o.level = level;
            o.leaf = false;
            newObj.push(o);
            if (o.id == itemId) {
              o.expend = isExpend;
            }
            if (o.expend == true) {
              vm.recursive(o.children, newObj, o.level + 1, itemId, isExpend);
            }
          } else {
            o.level = level;
            o.leaf = true;
            newObj.push(o);
            return false;
          }
        });
      },
  </code></pre>
  <p>Could someone tell, what could be real benefit out of this, I see it could be easier to maintain and  all the data in array is reactive since it is only in one level ???</p>