在vue中呈现嵌套列表而不嵌套HTML元素？

<template>
  <div>
    <nested-list :data="listData"></nested-list>
  </div>
</template>

<script>
  // 定义NestedList组件
  Vue.component('nested-list', {
    props: {
      data: {
        type: Array,
        required: true
      }
    },
    template: `
      <ul>
        <li v-for="item in data" :key="item.id">
          {{ item.name }}
          <nested-list v-if="item.children" :data="item.children"></nested-list>
        </li>
      </ul>
    `
  });

  export default {
    data() {
      return {
        listData: [
          {
            id: 1,
            name: 'Item 1',
            children: [
              {
                id: 2,
                name: 'Item 1.1',
                children: [
                  {
                    id: 3,
                    name: 'Item 1.1.1'
                  },
                  {
                    id: 4,
                    name: 'Item 1.1.2'
                  }
                ]
              },
              {
                id: 5,
                name: 'Item 1.2'
              }
            ]
          },
          {
            id: 6,
            name: 'Item 2'
          }
        ]
      };
    }
  };
</script>