Vue full selection exercise error reporting Computed property was assigned to but it has no setter.

I am doing an all-to-all exercise in Vue to achieve all-to-all selection. At present, the final effect is done, but when I click the select all / do not select button, the console will report an error. No, no, no.

Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Page Title</title>
  <link rel="stylesheet" href="v-for.css">
</head>
<body>
  <div id="app" v-cloak>
    <template v-if="lists.length">
      <table>
        <thead>
          <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th>
              <input type="checkbox" v-model="allChecked" @click="selectAll">
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in lists">
            <td>{{ index + 1}}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.price }}</td>
            <td>
                <!-- 0 -->
              <button
                :disabled="0 == item.count"
                @click="handleDel(index)">-</button>
                <!-- 10 -->
              {{ item.count }}
              <button
                :disabled="10 == item.count"
                @click="handleAdd(index)">+</button>
            </td>
            <td>
              <button @click="clearItem(index)"></button>
            </td>
            <td>
              <input type="checkbox" v-model="item.flag" @click="item.flag = !item.flag">
            </td>
          </tr>
        </tbody>
      </table>
      <span>:{{ totalPrice }}</span>
    </template>
    <div v-else></div>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="v-for.js"></script>
</body>
</html>

js:
var app = new Vue({
  el: "-sharpapp",
  data: {
    allCheck: true,
    lists: [
      {
        id: 1,
        name: "iPhone 7",
        price: 6188,
        count: 1,
        flag: true,
      },
      {
        id: 2,
        name: "iPad Pro",
        price: 5888,
        count: 1,
        flag: true,
      },
      {
        id: 3,
        name: "MacBook Pro",
        price: 21488,
        count: 1,
        flag: true,
      },
    ],
  },

  computed: {
    totalPrice: function() {
      let total = 0;
      for ( let i = 0; i < this.lists.length; PPi ) {
        total += this.lists[i].count * this.lists[i].price;
      }
      return total.toString().replace(/\B(?=(\d{3})+$)/g, ",");
    },

    allChecked: function() {
      for ( let i = 0; i < this.lists.length; PPi ) {
        if ( !this.lists[i].flag )  return allCheck = false;
      }
      return allCheck = true;
    }
  },

  methods: {
    handleDel: function(index) {
      if ( 0 == this.lists[index].count ) return;
      --this.lists[index].count;
    },

    handleAdd: function(index) {
      if ( 10 == this.lists[index].count ) return;
      PPthis.lists[index].count;
    },

    clearItem: function(index) {
      return this.lists.splice(index, 1);
    },

    selectAll: function() {
      this.allCheck = !this.allCheck;
      for ( let i = 0; i < this.lists.length; PPi ) {
        this.lists[i].flag = this.allCheck;
      }
    }
  }
});

computedallCheckedallCheckallCheck allCheck : function() { for ( let i = 0; i < this.lists.length; PPi ) { if ( !this.lists[i].flag ) //return allCheck = false;// return false;// return false } //return allCheck = true;// return true;// return true }