list-view.js

export const ListView = (store) => ({
  data: () => ({
    items: []
  }),
  methods: {
    complete(id) {
      store.complete(id)
    },
    add() {
      const value = prompt('Name of todo')
      store.add(item.create(value))
    }
  },
  created() {
    this.clear = store.onChange(items => this.items = items)
  },
  destroyed() {
    this.clear()
  },
  template: `<div>
    <button @click="add()">Add</button>
    <div 
      v-for="item of items"
      @click="complete(item.id)">
      {{item.body}} {{item.complete}}
    </div>
  </div>`
})

main.js

import * as crayon from 'crayon'
import * as vue from 'crayon/vue'
import * as item from './item'
import { ListView } from './list-view'

// Creating store
const store = item.createStore()

// Creating router
const app = crayon.create()
app.use(vue.router())

// Using property injection to pass the store into my component
app.path('/', (res, res) => res.mount(ListView(store)))

app.load()