Demonstrating recursive Vue components

MasterList.vue

<template>
  <div id="app">
    <nested-list
      v-for="item in list"
      :key="item.name"
      :name="item.name"
      :items="item.items"
      :level="0"
    />
  </div>
</template>

<script>
import NestedList from './NestedList'

export default {
  name: 'MasterList',
  components: { NestedList },
  data() {
    return {
      list: [
        {
          name: 'master on level 0',
          items: [
            {
              name: 'item on level 1',
              items: [
                {
                  name: 'item on level 2',
                  items: [{ name: 'item on level 3' }],
                },
                { name: 'item on level 2' },
                { name: 'item on level 2' },
              ],
            },
            { name: 'item on level 1' },
          ],
        },
      ],
    }
  },
}
</script>

<style>
body {
  background: #20262e;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}
.item {
  position: relative;
}
</style>

NestedList.vue

<template>
  <div>
    <div class="item" :style="indentation">{{ name }}</div>
    <nested-list
      v-for="item in items"
      :key="item.name"
      :name="item.name"
      :items="item.items"
      :level="level + 1"
    />
  </div>
</template>

<script>
export default {
  name: 'NestedList',
  props: {
    name: String,
    level: Number,
    items: Array,
  },
  computed: {
    indentation() {
      return { transform: `translateX(${this.level * 30}px)` }
    },
  },
}
</script>