With regard to the principle of Vue methods method triggering, under what circumstances will methods trigger all methods? Why? Does it have anything to do with Vue's virtual DOM? - Codes Helper

The

documentation and many videos say that the difference between methods and computed is that when one of the methods in methods is triggered, other methods in methods are also triggered. But in practice, it is found that not all cases will be triggered. Guys, can you explain? Did I write it wrong or did I understand it wrong?
Code:

    <div id="computed">
        <button v-on:click="agePP">age</button>
        <button v-on:click="namePP">name</button>
        age : {{ showAge() }}, {{ a() }}
        name : {{ showName() }}, {{ b() }}
        {{ c() }}
    </div>
    <script>
        var vm = new Vue({
            el: "-sharpcomputed",
            data: {
                name: 15,
                age: 5,
            },
            methods: {
                showAge () {
                    console.log("age");
                    return this.name;
                },
                showName () {
                    console.log(this.name)
                },
                a () {
                    console.log("a")
                },
                b () {
                    console.log("b")
                },
                c () {
                    console.log("c")
                }
            }
        })

for example, in the code and image above, click the age button, and you can see that age is increasing in the console. The age on the page actually shows the value of the static name property. At this time, none of the methods in the methods will be called.
but when you operate the name button, the corresponding name value is printed in the showName () method and is not rendered to the page, and the method is all triggered.
so what are the conditions under which all methods is triggered? Maybe my above problem is not described clearly, and then I change both methods to statements that have nothing to do with the value of the data attribute, as follows:

showAge () {
    console.log("age")
},
showName () {
    console.log("name")
},

then it is found that none of the methods will be triggered, so the condition for all triggers is that the data property is involved in the method, and the property has changed compared to the last time, is that right?
is not over yet. I have tried another way of writing. I want to do the operation in the method and call the method in the template syntax, but I find that the method executes itself and reports an error:

    <div id="computed">
        <button v-on:click="showAge()">age</button>
        <button v-on:click="showName()">name</button>
        age : {{ showAge() }}, {{ a() }}
        name : {{ showName() }}, {{ b() }}
        {{ c() }}
    </div>
    <script>
        var vm = new Vue({
            el: "-sharpcomputed",
            data: {
                name: 15,
                age: 5,
            },
            methods: {
                showAge () {
                    this.age += 1;
                    console.log(this.age);
                },
                showName () {
                    this.name += 1;
                    console.log(this.name);
                },
                a () {
                    console.log("a")
                },
                b () {
                    console.log("b")
                },
                c () {
                    console.log("c")
                }
            }
        })

Why is this? Because when rendering the page for the first time, I found that the value of the data property changed, the page data changed, reloaded, and then changed and reloaded. Is that the reason? Is there a boss who can tell me how it works? [crying]