[Vuejs]-How to list multiple components with VueJS?

In you list loop do the following

<li v-for="todo in todos | orderBy 'done'">
            <del v-if="todo.done">
                {{ todo.text }}
            </del>
            <template v-else>
                {{ todo.text }}
            </template>
            <img v-bind:src="todo.image" alt="test" v-if="todo.image"/>
      <a href="" @click.prevent="todo.done = !todo.done">✓</a>
</li>

and add a watcher to the list’s length where you add an image to the last todo if its evey fourth one:

(function () {
    new Vue({
        el: '#todo-list',
        data: {
            todos: [
                {
                    text: 'Do stuff',
                    done: false,
                    image: ''
                },
                {
                    text: 'Done thing',
                    done: true,
                    image: ''
                },
                {
                    text: 'Other stuff',
                    done: false,
                    image: ''
                }
            ]
        },
        watch: {
            todos: function (list) {
        if(list.length%4 == 0) {
        this.todos[list.length-1].image = 'https://www.w3schools.com/w3css/img_lights.jpg';
    }
}
        },
        methods: {
            new: function () {
                this.todos.push({
                    text: this.todoText,
                    done: false,
                    image: ''
                });
                this.todoText = '';
            }
        }
    });
}());