vue手表叠加操作

Question

我用vue组件来覆盖我的组件，我的组件有一个手表来监听某个值，当我跳转到下一页然后返回当前页面时，当手表的userTypes发生变化时，它会执行两次输出新值。多次重复此操作，userTypes函数控制台将执行多次。有规律，执行次数等于下一页并返回当前页次数。 这是我的代码：

//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
    }
  }
}

我试图破坏currnet组件，但它破坏了实例，我的其他表单数据也被破坏了。这不是我所期望的。我该怎么做才能解决这个问题？