<div id="app">
  <my-checkbox></my-checkbox>
</div>

<template id="my-checkbox">
  <div>
    <input type="checkbox" value="foo" v-model="checkedVals" /> foo
    <input type="checkbox" value="boo" v-model="checkedVals" /> boo
    <input type="checkbox" value="bar" v-model="checkedVals"> bar
    <p>{{ checkedVals }}</p>
  </div>
</template>

body {
  background-color: #777;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAU0lEQVQIHQXBwRGDIBAAwO2/AMcCDHAcPjIRxjJ8Je1kl1uqUgphsWu6w0sIG6npLpcUBql4e/wsVRKabrkNTacIYbMrwsF06rqUhsnXVKVT+Hj+Ue4rPSONk4kAAAAASUVORK5CYII=);
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

input, label, span {
  display: inline-block;
  vertical-align: middle;
  margin: 0 5px;
}

let app = new Vue({
  el: '#app',
  components: {
    'myCheckbox': {
      template:'#my-checkbox',
      data () {
        return {
          checkedVals: ['bar']
        }
      }
    }
  }
})