JSFiddle - React, Tailwind, and code Playground

HTML

<div id='example-3'>
  <div v-for="(item, index) in names" :key="index">
  <input type="checkbox" :id="item.name" v-model="item.checked">
  <label :for="item.name">{{ item.name }}</label>
  </div>
  <span>Checked names: {{ checkedNames }}</span>
</div>

JavaScript

new Vue({
  el: '#example-3',
  data() {
    return {
      names: [{
        name: 'jack',
        checked: true
      }, {
        name: 'john',
        checked: false
      }, {
        name: 'mike',
        checked: false
      }]
    }
  },
  computed: {
     checkedNames () {
        return this.names.filter(item => item.checked).map(name => name.name)
     }
  }
})