Vue中如何递归渲染树状数据生成DOM节点？

<code class="vue"><template>
  <div>
    {{ node.name }}
    <Tree v-for="(child, index) in node.children" :node="child" :key="index"></Tree>
  </div>
</template></code>

<code class="javascript"><script>
export default {
  name: 'Tree',
  props: {
    node: {
      type: Object,
      required: true
    }
  }
};
</script></code>

<code class="vue"><template>
  <div>
    <Tree :node="rootData" />
  </div>
</template>

<script>
import Tree from './Tree.vue';

export default {
  components: {
    Tree
  },
  data() {
    return {
      rootData: {
        name: 'A',
        children: [
          { name: 'B', children: [{ name: 'C', children: [{ name: 'D', children: [] }] }] },
          { name: 'E', children: [] }
        ]
      }
    };
  }
};
</script></code>

<code class="html"><div>
  A
  <div>
    B
    <div>
      C
      <div>D</div>
    </div>
  </div>
  <div>E</div>
</div></code>