Any way to assign reactive store value to reactive state? - vue.js

Question

I have a reactive store store.js:
import {reactive} from "vue";
const re = reactive({})
export default {
re
}
which I'm using inside a component to assign a text value:
store.re.blog = 'Hello World!'
How can I assign this value to state inside another component? I've tried:
const state = reactive({
content1: store.re.blog || '',
content2: store.re.blog ? store.re.blog : ''
})
both of which don't work. I want to put the value in state because in the next step I'm sending the state object via ajax request to the database.
I'm using vue 3 with script setup

Answer 1

It works for me:
App.vue:
<template>
<HelloWorld />
<OtherComponentReceivingStoreValue />
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from './components/HelloWorld.vue';
import OtherComponentReceivingStoreValue from "#/components/OtherComponentReceivingStoreValue.vue";
export default defineComponent({
name: 'App',
components: {
OtherComponentReceivingStoreValue,
HelloWorld
}
});
</script>
HelloWorld.vue:
<template>
Component that initialize the store blog value
</template>
<script lang="ts" setup>
import store from '#/store'
store.re.blog = 'Hello World!'
</script>
ComponentReadingTheStore:
<template>
<div>
store value:
{{ state }}
</div>
</template>
<script lang="ts" setup>
import store from '#/store'
import {reactive} from "vue";
const state = reactive({
content1: store.re.blog || '',
content2: store.re.blog ? store.re.blog : ''
})
</script>
If what you want is to change the store in the receiver component when the first component mutate the store, you have to put a watch or make a computed.