JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">
  <h2>Todos:</h2>
    <ul class="todoList">
        <li v-for="(todoItem , index) in list">
            <label>
                <input class="todoChick" type="checkbox" v-model="todoItem.done"/>
                <span>{{ todoItem.text }}</span>
            </label>
        </li>
    </ul>
    <input v-model="text" type="text" name="" value="" placeholder="入力してください">
    <input v-on:click="addTodo()" type="button" value="追加する">
    <div class="hoge">hoge</div>
    <div>
        <select id="removeStatus" v-model="chick">
            <option>チェックあり</option>
            <option>チェックなし</option>
        </select>
        <input v-on:click="removeTodo()" type="button" value="削除する">
    </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

Vue

new Vue({
el: '#app',
    data:{
        text: '',
        list: [
            {text: 'arr0', done: true , index: 0} ,
            {text: 'arr1', done: false , index: 1} ,
            {text: 'arr2', done: true , index: 2} ,
            {text: 'arr3', done: false , index: 3}
        ],
        chick: 'チェックあり'
    },
    methods: {
        addTodo: function() {
            var newTodo = this.text;
            var num = this.list.length;

            if(newTodo){
                this.list.push(
                    {text: newTodo, done: false , index: num}
                );
                this.text= '';
            }else{
                alert('入力してください');
            }
        },
        removeTodo: function() {
            var targetList = this.list;
            var selectChickFlg = this.chick;
            this.list = targetList.filter(function(i) {
                var chickFlg = i.done;
                var num = i.index;

                if (selectChickFlg === 'チェックあり') {
                    return i.done === false;
                } else if(selectChickFlg === 'チェックなし') {
                    return i.done === true;  
                }
            });
        }
    }
})