Can I manage the store object in the link I will open with a single store?

[frknclskn]

This application aims to operate in a newly opened window with a store(vuex) object.
Can store loyalty continue on both screens when I open an app in a new tab?
When I change the message in the new tab, I want it to change in the message in the other tab.
I change the " Test Message " value to " I'm opening a new window " and click the Open New Window button. "Test Message" is written in the message field in the window that appears. Idont want this.
If we change this text field from whichever window, what can I do to change this field in the other window? This is just a simple example. At the end of the day I need a more complex structure.

Example Project Link

main.js

import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);

//#region store
import { createStore } from "vuex";

app.use(createStore({
    state: { testMessage: 'Test Message' },
    mutations: { updateMessage(state, payload) { state.testMessage = payload; } },
    getters: { getMessage(state) { return state.testMessage; } }
}));
//#endregion

//#region router
import { createRouter, createWebHistory } from "vue-router";

import Main from "./components/Main.vue";
import Second from "./components/Second.vue";

const routes = [{ path: "/", name: "Main", component: Main, }, { path: "/Second", name: "Second", component: Second }];

app.use(createRouter({ history: createWebHistory(process.env.BASE_URL), routes }));
//#endregion
app.mount("#app");

App.vue

<template>
    <div id="nav">
        <p style="background-color:#a84b4b;color:white;padding:20px;">Current Message: {{getMessage}}</p>
        <p>Click Second Page Link</p>
        <router-link to="/">Main</router-link> |
        <router-link to="/Second">Second</router-link> |
        <a href="#" @click="openNewWindow()">Open New Window</a>
    </div>
    <router-view />
</template>

<script>
    import { mapGetters } from "vuex";
    export default {
        computed: { ...mapGetters(["getMessage"]) },
        methods: {
            openNewWindow() {
                let routeData = this.$router.resolve({ name: 'Second' });
                var t = window.open(routeData.href, 'New Window',
                    'height=500,width=500,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
                //var self = this;
                if (t) {
                    t.loaded = false;
                    t.onload = function () {
                        t.loaded = true;
                    }
                }
            }
        }
    }
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }
</style>

Main.vue

<template>
    <p>Main component {{getMessage}}</p>
</template>

<script>
    import { mapGetters } from "vuex";
    export default { computed: { ...mapGetters(["getMessage"]) } }
</script>

Second.vue

<template>
    <div>
        <p>Second component store value</p>
        <input style="width:50%" v-model="message" @keyup="updateMessage($event.target.value)" />
    </div>
</template>

<script>
    import { mapGetters, mapMutations } from "vuex";
    export default {
        data() { return { message: '' } },
        computed: { ...mapGetters(["getMessage"]) },
        methods: { ...mapMutations(["updateMessage"]) },
        mounted() { this.message = this.getMessage; }
    }
</script>

[vue-bot]

Hello, thank you for taking time filling this issue!

However, we kindly ask you to use our Issue Helper when creating new issues, in order to ensure every issue provides the necessary information for us to investigate. This explains why your issue has been automatically closed by me (your robot friend!).

I hope to see your helper-created issue very soon!