是否可以在VueJS中将一个子组件与另一个同步？

<template>
  <div>
    <child-component :data="parentData" @updateData="updateParentData"></child-component>
    <p>父组件数据：{{ parentData }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: '父组件初始数据'
    };
  },
  methods: {
    updateParentData(data) {
      this.parentData = data;
    }
  }
};
</script>

<template>
  <div>
    <p>子组件数据：{{ data }}</p>
    <button @click="updateData">修改父组件数据</button>
  </div>
</template>

<script>
export default {
  props: ['data'],
  methods: {
    updateData() {
      const newData = '子组件修改后的数据';
      this.$emit('updateData', newData);
    }
  }
};
</script>