<script src="//unpkg.com/vue@2.2.1/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuex@2.3.1"></script>
<script src="//wzrd.in/standalone/uuid@latest"></script>

<div class="container">
  <div id="app"></div>
</div>
* {
    box-sizing: border-box;
}

html, body {
  height: 100%
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  box-shadow: 0 0 25px rgba(0,0,0,0.08);
  transform: translateX(-50%) translateY(-50%);
  width: 300px;
  height: 200px;
  padding-bottom: 20px;
  overflow: scroll;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  li {
    background: #F3F3F3;
    border-top: 1px solid #F6F6F6;
    border-bottom: 1px solid #F6F6F6;
    padding: 10px 15px;
    color: darken(#00c6ff, 15);
    &:before {
      content: '> ';
      color: #00c6ff;
    }
  }
}

input[type="text"] {
  display: block;
  margin: 0;
  width: 100%;
  font-family: sans-serif;
  font-size: 15px;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  padding: 5px 7px;
  border: 1px solid #00c6ff;
}
input[type="text"]:focus {
  outline: none;
}

.completed {
  text-decoration: line-through
}
View Compiled
const store = new Vuex.Store({
  state: {
    todos: [
      {
        task: 'Code',
        completed: true,
        id: uuid.v4()
      },
      {
        task: 'Sleep',
        completed: false,
        id: uuid.v4()
      },
      {
        task: 'Eat',
        completed: false,
        id: uuid.v4()
      }
    ]
  },
  getters: {
    todos: state => state.todos
  },
  mutations: {
    addTodo: (state, payload) => {
      const task = {
        task: payload,
        completed: false,
        id: uuid.v4()
      }
      console.log(state)
      state.todos.unshift(task);
    },
    toggleTodo: (state, payload) => {
      state.todos = state.todos.map(t => {
        if(t.id === payload) {
          return {task: t.task, completed: !t.completed, id: t.id}
        }
        return t;
      })
    }
  }
})

const todoList = {
  props: ['todos'],
  methods: {
    toggleTodo: function(id) {
      this.$store.commit('toggleTodo', id)
    }
  },
  template: `
    <div>
      <ul>
        <li v-for="t in todos" :class="{completed: t.completed}" @click="toggleTodo(t.id)">{{t.task}}</li>
      </ul>
    </div>
  `,
}

var App = new Vue({
  data: function() {
    return {
      task: ''
    }
  },
  computed: {
    todos: function() {
      return this.$store.getters.todos
    }
  },
  methods: {
    addTodo: function() {
      this.$store.commit('addTodo', this.task)
      this.task = ''
    }
  },
  template: `
    <div>
      <form @submit.prevent="addTodo">
        <input type="text" v-model="task" />
      </form>
      <todo-list :todos="todos"></todo-list>
    </div>
  `,
  store: store,
  components: {
    'todo-list': todoList
  }
});
App.$mount('#app');
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.