Uncheck CheckBox with its label in VueJS

I am trying to uncheck a checkbox which is checked in VueJs.

HTML:

new Vue({
  el: '#app',
  data: {
    checkedNames: [],
    checkedName: true
  },
  methods: {
    uncheck: function() {
      this.checkedName = !this.checkedName;
    }
  }
})

li.badge.badge-primary {
  cursor: pointer;
  margin: 5px;
  font-size: 100%;
}

ul.checkboxes {
  list-style: none;
}

ul.tags {
  margin-top: -110px;
  margin-left: 85px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<div id='app'>
  <ul class="checkboxes">
    <li><input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
      <label for="jack">Jack</label></li>

    <li><input type="checkbox" id="john" value="John" v-model="checkedNames">
      <label for="john">John</label></li>

    <li><input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
      <label for="mike">Mike</label></li>
  </ul>
  <br/>
  <ul class="tags">
    <li @click="uncheck" class="badge badge-pill badge-primary" v-for="checkedName in checkedNames">
      
    </li>
  </ul>
</div>

Here I am not able to uncheck the selected checkbox using it label as show in my above code.

Just started with VueJS, help appreciated.