vue watch superimposed operation

Question

I used vue component to cover my component,My component has a watch to listen to a certain value,When I jump to the next page and then return to the current page, when the userTypes of the watch change, it will execute twice to output the new value.Repeat this operation multiple times, userTypes function console will execute multiple times.it is regular,executes times equal to next page and return current page times. here is my code:

//PageA
//dom
<keep-alive>
  <div>
    <el-form ref="formRef" :model="formData" label-width="124px">
        <el-form-item
          label="name:"
          :rules="[FormRules.required(), nameRules]"
          prop="userName"
          required
          v-if="type === OBJECT_TYPE.PERSONAL"
        >
          <el-input
            placeholder="please input your name"
            v-model="formData.userName"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="phone"
          label="your phone："
          :rules="[FormRules.required(), phoneRules]"
          label-width="200px"
        >
          <el-input
            v-model="formData.phone"
            placeholder="please input your phone"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="type"
          label="type："
          label-width="200px"
        >
          <el-input
            v-model="formData.type"
            placeholder="please input your type"
          ></el-input>
        </el-form-item>
      </el-form>
    <el-button @click='next'>nextPage</el-button>
  <div>
</keep-alive>
//js
export default {
  data(){
    return{
      formData:{}
    }
  },
  watch:{
    'formData.userType':function(newVal){
      console.log(newVal)
    }
  },
  methods:{
    next(){
      //...toNextPage
    }
  }
}

i tried to destroy currnet component,but it destroy the instance,my other form data also destroyed. it's not what i expected.what can i do to resolve this problem?