Tree.vue

<template>
    <ul>
        <li v-for="item in levelItems">
            {{ item.title }}
            <tree :items="items"
                  :left="item.left"
                  :right="item.right">
            </tree>
        </li>
    </ul>
</template>

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

export default {
    name: 'tree',
    components: { Tree },
    props: {
        items: {
            type: Array,
            required: true,
        },
        left: {
            default: 0,
        },
        right: {
            default: null,
        },
    },
    computed: {
        levelItems() {
            return this.getArray(this.items, this.left, this.right);
        },
    },
    methods: {
        getArray(set, left = 0, right = null) {
            const tree = [];
            set.forEach((el) => {
                if (el.left === (left + 1) &&
                    (right === null || el.right < right)) {
                    tree.push(el);
                    left = el.right;
                }
            });

            return tree;
        },
    },
};
</script>