vue3 computed与watch函数用法

<template>
  <div>
    英语：<input name="va1" v-model="va1" >
  </div>
  <div>
    数学：<input name="va2" v-model="va2" >
  </div>
  <div>
    总分:{{total}}
  </div>
  <div>
    平均分：{{average}}
  </div>
</template>

<script lang="ts">

  import {ref,watch,computed} from  "vue" ;

  export default {
    name: 'App',
    setup(){  
      const va1 = ref(10)
      const va2 = ref(20)
      const total  = computed(()=>{
        return +va1.value + +va2.value
      })

      const average = computed(()=>{
        return Math.round(total.value/2)
      })

      watch(()=>va1.value,(newVal,oldVal)=>{
        console.log("-----------------")
        console.log(newVal)
        console.log(oldVal)
      })

      return {
        va1,
        va2,
        total,
        average
      }
    }
  }
</script>