为什么这样操作计算属性会失效?Why does this operation invalidate the calculated properties?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <button @click="update()">click-total:{{total}}</button>
      <p v-for="(item,index) in persions" :key="index">{{item}}</p>
    </div>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          persons: [
            {
              id: 1,
              name: "Links",
              age: 22,
            },
            {
              id: 2,
              name: "ReoNa",
              age: 22,
            },
            {
              id: 3,
              name: "Aimyon",
              age: 26,
            },
          ],
        },
        computed: {
          total() {
            let total = 0;
            // 在这里重新为this.persons赋值之后,执行 updatePersons 方法后, 不再执行 total 计算属性,为什么?
            // After assigning value to this.persons again here, click to execute updatePersons  method, but do not execute total calculation attribute. why ?
            this.persons= this.persons.map((item) => {
              total += item.age;
              item.age += 10;
              return { ...item };
            });
             // 在这里没有重新为this.persons赋值之后,执行 updatePersons 方法后,可执行 total 计算属性,为什么?
            // After not assigning value to this.persons here, click to execute updatePersons  method and execute total calculation attribute
//           this.persons.map((item) => {
//              total += item.age;
//             item.age += 10;
//            return { ...item };
//          });
            return total;
          },
        },
        methods: {
          updatePersons() {
            this.$set(this.persons, 0, {
              ...this.persons[0],
              age: this.persons[0].age + 100,
            });
          },
        },
      });
    </script>
  </body>
</html>

DO NOT MODIFY any values inside a computed property, if not using setter/getter.
For your 1st example, vue cannot detect the changes in the array.
For your 2nd example, even if it gets what you want, I would say that is not good logic.
Do not modify any values in a .map()! use forEach.