JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <input type="text" id="add-new-todo" name="add-new-todo" @keyup.13="addNewTodo" v-model="newTodo">
    <ul>
        <item v-bind:b="c" v-for="(c, index) in a">
            <slot name="check"></slot>
            <slot></slot>
            <slot name="del"></slot>
        </item>
    </ul>
    <button @click="showAll">Все</button>
    <button @click="showComplete">Завершенные</button>
    <button @click="showNoComplete">Текущие</button>
</div>

JavaScript

var item = Vue.component('item', {
         props: ['b'],
         template: '<li>' +
         '<input type="checkbox" slot="check" @click="isStatus" v-model="b.is">' +
         '<span>{{ b.text }}</span>' +
         '<button slot="del" @click="delTodo(b, $index)">X</button></li>',
         methods: {
             delTodo: function(e,idx) {
                 this.a.$remove(e);
                 console.log(idx);
             },
             isStatus: function () {
                 console.log('Выполнено/Не выполнено')
             }
         }
     });

    var app = new Vue({
       el: '#wrapper',
       components:{
           'item': item
       },
        data: function () {
            return {
                newTodo: '',
                a: [
                    {text:'blyyyyyyyy1', is: true},
                    {text:'blyyyyyyyy2', is: true},
                    {text:'blyyyyyyyy3', is: true},
                    {text:'blyyyyyyyy4', is: false}
                ]
            }
        },
        methods: {
            addNewTodo: function () {
               this.a.push({text:this.newTodo});
                this.newTodo = '';
            },
            showAll: function () {
                console.log('Показать всё');
            },
            showComplete: function () {
                console.log('Показать завершенные');
            },
            showNoComplete: function () {
                console.log('Показать текущие');
            }
        }
    });