Issue: I am facing a challenge in transferring data between two separate components - the main component and another component. Despite attempting to implement reactive State Management based on Vue documentation, the object's value remains unchanged from its initial state and fails to reflect modifications made by other components.
Attempted Solution: store.ts
const originalValue = ref("defaultValue");
export const store = reactive({ value: originalValue });
componentA.vue:
import { store } from "./store";
...
...
console.log("mounted with store object value: ", this.store.value);
this.store.value = "Modified by componentA.vue";
console.log("Modified store object value: ", this.store.value);
componentB is accessed after componentA alters the store value...
componentB.vue:
import { store } from "./store";
...
...
console.log("mounted with store object value: ", this.store.value); // default value persists