SOURCE

window.a = new Vue({
  el: "#app",
  data(){
    return {
      thing: '',
      tasks: [],
      filter: ""
    }; 
  },
  methods: {
    inputTask(){
      this.tasks.push({
        title: this.thing,
        finished: false,
      });
      this.thing = '';
    },
    remove(index){
      this.tasks.splice(index, 1);
    }
  }
})

<script src='https://unpkg.com/vue/dist/vue.min.js'></script>
<link href='https://unpkg.com/semantic-ui@2.2.13/dist/semantic.min.css' rel='stylesheet' type='text/css'>
<script src='https://unpkg.com/semantic-ui@2.2.13/dist/semantic.min.js'></script>
<div id='app'>
  <div class="ui card">
    <div class='content'>
    <div class="ui input">
      <input v-model='thing' @keyup.enter='inputTask()'><br>
    </div>
    <div class="ui relaxed divided list">
      <div class="item" v-for='(item, index) in tasks' v-if='filter === item.finished || filter === ""'>
         <div class="content">
          <a class="header"><label :style="item.finished ? 'text-decoration: line-through' : '' "><input type='checkbox' class='ui checkbox' v-model='item.finished' >{{item.title}}</label>
            <button class="mini ui icon button" @click='remove(index)'>
                <i class="remove icon"></i>
            </button>
          </a>
          <div class="description">{{item.finished ? "Finished" : "Active"}}</div>
        </div>

      </div>
    </div>
    <a href='javascript: void(0)' @click='filter=""'>ALL</a>
    <a href='javascript: void(0)' @click='filter=false'>Active</a>
    <a href='javascript: void(0)' @click='filter=true'>Finished</a>
    </div>
  </div>
</div>  

.header label{
  vertical-align: bottom;
}
.header label input[type=checkbox]{
  vertical-align: bottom;
}
.header button{
  vertical-align: bottom;
}