<script src="//unpkg.com/vue@2.2.1/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuex@2.3.1"></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;
  overflowY: 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
      },
      {
        task: 'Sleep',
        completed: false
      },
      {
        task: 'Eat',
        completed: false
      }
    ]
  },
  getters: {
    todos: state => state.todos
  }
})

const todoList = {
  props: ['todos'],
  template: `
    <div>
      <ul>
        <li v-for="t in todos" :class="{completed: t.completed}">{{t.task}}</li>
      </ul>
    </div>
  `
}

var App = new Vue({
  created: function() {
    // console.log(this)
  },
  computed: {
    todos: function() {
      return this.$store.getters.todos
    }
  },
  template: `
    <div>
      <form>
        <input type="text" />
      </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.