这种情形该怎么处理？

child.vue

<template>
  <div class="child">
    <h4>这里是子组件</h4>
    <el-input v-model="data"></el-input>
    <el-button type="primary" @click="onClick">add</el-button>
    <!-- <grand-child></grand-child> -->
  </div>
</template>
<script>

export default {
  name: 'Child',
  props: {
  // 1 、用 v-model 绑定
    value: {
      type: [String, Number]
    }
  },
  data() {
    return {
      data: ''
    };
  },
  watch: {
  // 2 、监听 value 的变化，并做一些处理
    value: {
      handler(val) {
        console.log(val);
        this.data = val + 'parent';
      },
      immediate: true
    }
  },
  methods: {
    onClick() {
      this.data += 'child';
      // 3 、更新值
      this.$emit('input', this.data);
    }
  }
};
</script>

parent.vue

<template>
  <div class="father">
    <h3>这里是父组件</h3>
    <child v-model="data"> </child>
  </div>
</template>
<script>
import Child from '@/views/Child';

export default {
  name: 'Parent',
  components: {
    Child
  },
  data() {
    return {
      data: '888'
    };
  }
};
</script>

就是子组件要监听父组件传过来的 prop ，并做一些操作（步骤 2 ）。当子组件更新值的时候（步骤 3 ），又会再次触发 watcher 且又执行一次步骤 2 ，此时我并不想再触发步骤 2 的操作 ，除了加一个类似锁的变量之外还有什么别的办法吗？ 谢谢。