Why is the property not displayed inside the component, but outside all the norms?

Question

Vue.js

Vue.component('tree-items', {
    template: '#tree-template',
    props: {
        item: {
            type: Object,
            required: true,
        },
    },
    data: function () {
        return {
            isOpen: false,
            page: {},
            navigation: {},
        };
    },
    computed: {
        hasChildren: function () {
            return this.toArray(this.item.children).length;
        },
        hasItems: function() {
            if (!this.isUndefined(this.items)) {
                return this.items.length;
            }
            return 0;
        },
    },
    methods: {
        toggle: function () {
            if (this.hasChildren) {
                this.isOpen = !this.isOpen
            }
        },
        setItem: function (_item) {
            this.item = _item;
        }
    },
    mounted: function () {
        this.setItem(this.item);
    }
});

Template

<ul v-for="item in items" :key="item.id">
            <tree-items
                    :item="item"
            ></tree-items>
        </ul>
<script type="text/x-template" id="tree-template">
    {{ item }}
</script>

If the object is displayed not inside the component, then it is printed out, if inside, then it is empty, although the helper in the browser writes that it is.

Answer 1

<script type="text/x-template" id="tree-template">
    {{ item }}
</script>

What, just text? No, it won't. There must be some element. Do it - you are trying to display them liinside :ul

<script type="text/x-template" id="tree-template">
  <li>{{ item }}</li>
</script>