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

我设法通过类名称获取输入元素，从而选择了所有复选框，并添加或删除了它们的“ 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)
      }
    }
  }
}