手动选中和取消选中复选框后,如何使复选框响应全选功能?

我设法通过类名称获取输入元素,从而选择了所有复选框,并添加或删除了它们的“ checked”属性。但是,我发现,如果我选中并取消选中任何复选框,当我尝试选择所有复选框时,它们将不再受到影响。例如,在下图中,我选中并取消选中了前3个复选框。

我所做的事情: 1.检查元素-没有看到任何问题,因为尽管页面上未显示任何更改,但复选框元素的属性仍在更新。 2.控制台-此处未报告错误。

<table>
    <thead>
      <tr>
        <th><input type="checkbox" v-model="checked"></th>
        <th>ID</th>
        <th>Course Title</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="course in courses" :key="course.id">
        <td><input type="checkbox" class="inputs"></td>
        <td>{{course.id}}</td>
        <td>{{course.title}}</td>
        <td>{{course.price}}</td>
      </tr>
    </tbody>
  </table>
export default {
  name: 'CourseTable',
  data () {
    return {
      courses: udemy.results,
      checked: false
    }
  },
  methods: {
    check (arr) {
      for(let i=0; i<arr.length; i++){
        arr[i].setAttribute("checked", "")
      }
    },
    uncheck (arr) {
      for(let i=0; i<arr.length; i++){
        arr[i].removeAttribute("checked")
      }
    }
  },
  watch: {
    checked: function () {
      var inputs = document.getElementsByClassName("inputs")
      if(this.checked){
        this.check(inputs)
      }else{
        this.uncheck(inputs)
      }
    }
  }
}