Vue can't check the recently unchecked, checkbox even its binding

I have a list of checkboxes, I want when I click on input 4th all previous boxes being checked and the rest unchecked. I almost did it, but there is an issue that when I back to the those checked boxes and uncheck one of them, its still okay and the next being unchecked, but when again going forward and check another one from those unchecked the recently unchecked item being still unchecked and not changed.

here is the demo, and I think the GIF will describe my issue better.

Demo https://jsfiddle.net/j5dpkut8/1/

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <input type="checkbox" v-model="checked[0]" value="0" @change="printState(0)"> checked 0 <br>
  <input type="checkbox" v-model="checked[1]" value="1" @change="printState(1)"> checked 1 <br>
  <input type="checkbox" v-model="checked[2]" value="2" @change="printState(2)"> checked 2 <br>
  <input type="checkbox" v-model="checked[3]" value="3" @change="printState(3)"> checked 3 <br>
  <input type="checkbox" v-model="checked[4]" value="4" @change="printState(4)"> checked 4 <br>
  <input type="checkbox" v-model="checked[5]" value="5" @change="printState(5)"> checked 5 <br>
  <input type="checkbox" v-model="checked[6]" value="6" @change="printState(6)"> checked 6 <br>
  <input type="checkbox" v-model="checked[7]" value="7" @change="printState(7)"> checked 7 <br>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    checked: [
      false,false,false,false,false,false,false,false,
    ],
  },
  methods: {
    printState(x) {
      this.checked = [
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
    ],
    for (let i = 1; i < this.checked.length; i++) {
        if (i <= x) {
          this.checked[i] = true;
        }
      }
     console.log(this.checked);
    
    },
  }
})