<div class="container" id="app">

    <div class="row">

        <div class="col-sm-12">

            <h3>My Components</h3>

            <todo-item :todos="todos01"></todo-item>

        </div>

    </div>

</div>

<script type="x-template" id="component-todo">

    <ul class="list-group" v-if="todos && todos.length > 0">

        <li class="list-group-item" v-for="todo in todos" :class="{special: !todo.isSpecial}">

            {{todo.title}}

            <button class="btn btn-xs  pull-right" :class="{'btn-success': todo.isSpecial,'btn-danger': !todo.isSpecial }" @click="changeActive(todo)">

                {{todo.isSpecial ? 'DONE' : 'What?'}}

            </button>

        </li>

    </ul>

    <div v-else>

        <p>There isn't any todo</p>

    </div>

</script>

var todoItem = Vue.extend({

    template: '#component-todo',

    props: ['todos'],

    methods: {

        changeActive(todo) {

            todo.isSpecial = !todo.isSpecial;

        }

    }

})

Vue.component('todo-item', todoItem);

new Vue({

    el: '#app',

    data: {

        todos: [{

            id: 1,

            title: 'zgo to shoping',

            isSpecial: false

        }, {

            id: 2,

            title: 'jump for sport',

            isSpecial: true

        }, {

            id: 3,

            title: 'welcome vueJs',

            isSpecial: true

        }],

        todos01: [{

            id: 1,

            title: 'so so crazy',

            isSpecial: true

        }, {

            id: 2,

            title: 'i v ini',

            isSpecial: false

        }, {

            id: 3,

            title: 'nothing is there',

            isSpecial: true

        }]

    }

})