关于vue的methods问题

我有以下的vue的1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
    <script type="text/javascript">
      window.onload=function() {
          let vm = new Vue({
              el: '#div1',
              data:{
                  name:'aaa',
                  age:17
              },
              methods:{
                  show:function(n){
                      return parseInt(this.age) + n;
                      //alert('Hello vue3');
                  }
              }
          });
      }
    </script>
</head>
<body>
<div id="div1">
    <strong v-bind:title="age+'岁'">name:{{name}}</strong><br><br>
    age:{{age}}<br><br>
     newage:{{show(2)}}<br><br>
   <input type="button" value="test01" v-on:click="show(3)"><br><br>
   <input type="text" name="" value="" v-model="age"><br><br>
   <!--  <input type="text" name="" value="" v-model="name"><br><br>-->
  </div>
  </html>
  </body>

这个程序在按<input type="button" value="test01" v-on:click="show(3)"><br><br>这个按钮没有反应，我想要的结果是按了<input type="button" value="test01" v-on:click="show(3)"><br><br>这个按钮后 newage:{{show(2)}}的newage:变成20，即show:function(n){ return parseInt(this.age) + n; //alert('Hello vue3'); }这个函数的n变成3

我不知道

 computed:{
        newage(){
            return parseInt(this.age)+this.n;
         }
    }
});这个代码是什么意思？我在我的代码在写了这段代码后(){下面有一段红线

我改了一点你要的效果有了但是这样写很不对劲呀

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./vue.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            let vm = new Vue({
                el: '#div1',
                data: {
                    name: 'aaa',
                    age: 17,
                    n: 2 
                },
                methods: {
                    show: function (n) {
                        this.n = n
                        return parseInt(this.age) + n;
                        //alert('Hello vue3');
                    }
                }
            });
        }
    </script>
</head>

<body>
    <div id="div1">
        <strong v-bind:title="age+'岁'">name:{{name}}</strong><br><br>
        age:{{age}}<br><br>
        newage:{{show(n)}}<br><br>
        <input type="button" value="test01" v-on:click="show(3)"><br><br>
        <input type="text" name="" value="" v-model="age"><br><br>
        <!--  <input type="text" name="" value="" v-model="name"><br><br>-->
    </div>

</html>
</body>

我想的是以下这样：我这个程序一运行原来age是17，程序一运行因为newage:{{show(2)}}<br><br>参数是2,所以程序一运行newage:17+2，程序运行结果是newage:19,一但我单击 <input type="button" value="test01" v-on:click="show(3)"><br><br>时，参数就应该变成3了，那么age是17， newage就是newage:17+3,结果应该是newage:20，即newage:20,但程序没有变化

改成题主需要的效果了，不知道是否理解错误

这个问题我没有一个采纳，因为我要提最新问题所以不得以采纳一个