为什么我的两个单独的Vue组件会覆盖彼此的数据？

export default {
  data() {
    return {
      localData: 'This is local data'
    };
  }
};

// store.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    sharedData: 'Shared data'
  },
  mutations: {
    updateSharedData(state, payload) {
      state.sharedData = payload;
    }
  }
});

// 在组件中使用
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['sharedData'])
  },
  methods: {
    ...mapMutations(['updateSharedData'])
  }
};

import { ref } from 'vue';

export default {
  setup() {
    const localData = ref('This is local data');
    return { localData };
  }
};

// 父组件
<template>
  <ChildComponent :data="parentData" @update-data="handleUpdateData" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: 'Data from parent'
    };
  },
  methods: {
    handleUpdateData(newData) {
      this.parentData = newData;
    }
  }
};
</script>

// 子组件
<template>
  <button @click="updateData">Update Data</button>
</template>

<script>
export default {
  props: ['data'],
  methods: {
    updateData() {
      this.$emit('update-data', 'New data');
    }
  }
};
</script>