VUE3.0 中使用watch

<template>
    <div class="home">
        <div style="height: 100px;width: 400px;background-color: #42b983">
          <div>{{userName}}</div>
          <a-button @click="updateFormData">按钮</a-button>
        </div>
    </div>
</template>
<script>
  import {reactive,toRefs,watch} from "vue"
    export default {
        name: "Home",
        setup() {
          const formData = reactive({
            userName:'admin',
            password:'123456'
          })
          const data = toRefs(formData);

          const updateFormData = ()=>{
            formData.userName = "superAadmin";
          }

          watch(formData,(newVal,oldVal)=>{
            console.log(newVal+":==="+oldVal)
          })
          return {
            ...data,
            updateFormData
          }
        }
    };
</script>