Why is v-for not working in vue?

Question

Vue.js

HTML

<div id="app">
    <records></records>
</div>

JS

Vue.component('records', {
    template: ' <div>{{orders}}</div> <div><div v-for="order in orders"> {{order.id}}</div></div>',

    data: function() {
        return{
            orders: [{id: 1}, {id: 2}, {id: 3}]
        }
    },

    created: function () {
        this.getOrders();
    },

    methods: {
        getOrders: function () {
            var vm = this;
            axiosInst.get('/records')
                .then(function (response) {
                    //vm.$set('ordersList', response.data);

                    vm.orders = response.data.slice();
                    console.log(vm.orders);
                    console.log(response.data);
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
    }
})

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})

Faced such a problem, v-for does not work, although without a cycle, objects are displayed without problems.
Please help me figure it out.

Answer 1

Perhaps because your records component template has more than one root element.