Passing variables between vuejs3 instances

[cehceh]

I'm working with Django and Vuejs 3 by using CDN (vue.global.js) but I changed it to (vue.esm-browser.js) to enable me making an( import from ) my code is to make (vuejs.html) for every " form " or page because my business logic is large and I need the Django Jinja template so I don't use vuejs component , I'm using the power of jinja language by using ({% include 'my_path_to/vuejs.html' %}) to include files inside each other. So I have many instances of vuejs this is my code of two instances.

And my question is how to pass variables from instance 1 to instance 2 and vice versa or generally between vuejs instances.

As you can see I'm trying to use (provide & inject) as DOCS stated, Also I tried
myAppInstance.config.config.globalProperties.$MYGLOBALVARIABLE = "anything"
But I am failed

INSTANCE 1

{% load static %}
<!-- INSTANCE 1 -->
<script type="module">
    // var { createApp, ref, computed } = Vue;
    import { createApp, ref, provide } from '{% static "js/vue.esm-browser.js" %}';
    // import { Vue } from '/static/js/vue.global.js';
    const tabsButtons = createApp ({
        delimiters:["[[", "]]"],
        setup() {
            const msg = 'What is going on Tabs?';
            const title = ref('TABS BUTTONS');
            const titleTab = ref('TABS BUTTONS');
            provide('passVar', title)
            return {
                msg, title,
            }
        },
        data() {
            return {
                tabName: '',
                myVar: '',
                // middleName: '',
                // lastName: '',
                hideImportInfo:false,
                isHidden: false,
                hideProformaInvoice: false,
                hideInquiry: false,
                hideSalesConfirmation: false,
                hideShippingBill: false, //bill of lading
                hideAttachment:false,
                hideShippingInstructions: false,

                hideGroup: false,
                hideTax: false,
                hideImages: false,
                hideSettings: false,
                hideVendor: false,
                hideAccounting: false,
                hideContact:false,
                hideContract:false,
                hideInvoice: false,
            }
        },
        computed: {
        },
        methods: {
            // 
            getCurrentTab(){
                if(this.hideInquiry == true){
                    this.tabName = 'inquiry';
                }else if(this.hideContract == true){
                    this.tabName = 'contract';
                }else if(this.hideSalesConfirmation == true){
                    this.tabName = 'sales';
                }else if(this.hideImportInfo == true){
                    this.tabName = 'import';
                }else if(this.hideProformaInvoice == true){
                    this.tabName = 'proforma';
                }else if(this.hideInvoice == true){
                    this.tabName = 'invoice';
                }else if(this.hideShippingBill == true){
                    this.tabName = 'bill';
                }else if(this.hideShippingInstructions == true){
                    this.tabName = 'shipping';
                }else if(this.hideContact == true){
                    this.tabName = 'contact';
                }else if(this.hideGroup == true){
                    this.tabName = 'group';
                }else if(this.hideAccounting == true){
                    this.tabName = 'accounting';
                }else if(this.hideAttachment == true){
                    this.tabName = 'attachement';
                }else if(this.hideImages == true){
                    this.tabName = 'images';
                }else if(this.hideSettings == true){
                    this.tabName = 'settings';
                }else if(this.hideVendor == true){
                    this.tabName = 'import';
                }
                return this.tabName;
            },
            // next function works as expected here in methods not in computed
            openWindow(url) {
                var w = 480, 
                    h = 340;
                if (document.getElementById) {
                    w = screen.availWidth;
                    h = screen.availHeight;
                }
                var popW = 1300, //300,
                    popH = 700; //200;
                var leftPos = (w - popW) / 2;
                var topPos = (h - popH) / 2;
                msgWindow = window.open(url, 'popup', 'width=' + popW + ',height=' + popH +
                ',top=' + topPos + ',left=' + leftPos + ', scrollbars=yes');
                // alert('Clicked by Vue methods');
            },
            passingVars(){
                axios.post(
                    `{% url 'imports:add_import_operation' %}`, 
                    {'tab-name':this.tabName},
                ).then(response => {
                    console.log('done', this.tabName)
                }).catch(error => {
                    console.log('error occurs')
                })
            }
        },
        props: {
            nameTab: String,
        },
        mounted() {
            this.hideVendor = true;
            this.tabName = "import";
            // console.log('from tabs buttons:::', this.$amrTabName)
            // this.passingVars();
        },
    });
    // tabsButtons.provide('nameOfTab', 'tabsButtons.tabName')
    // tabsButtons.config.globalProperties.$amrTabName = 'amrAnything'
    // console.log(
    //     'APP-CONFIG::::', tabsButtons , 'var-from-dict-tabs-buttons:', tabsButtons.config.globalProperties['$amrTabName'])
    tabsButtons.mount('#tabs-buttons'); // ('#import-form');   // 
</script>

INSTANCE 2

{% load static %}
<!-- INSTANCE 2 -->
<script type="module">
    // var { createApp, ref, computed } = Vue;
    import { createApp, ref, computed, inject } from '{% static "js/vue.esm-browser.js" %}';
    // import { Vue } from '/static/js/vue.global.js';
    const divButtons = createApp ({
        delimiters:["[[", "]]"],
        setup() {
            const msg = 'What is going on DIV BUTTONS?';
            const title = 'DIV BUTTONS';
            const inj = inject("passVar")
            // const inj = inject("nameOfTab")
            return {
                msg, title, inj
            }
        },
        data() {
            return {
                tabName: '',                        
            }
        },
        computed: {
        },
        methods: {
        },
        beforeCreate() {
            console.log('from DIV buttons - BEFORE', this.$amrTabName)
        },
        mounted() {
            // alert(inject("nameOfTab"))
            console.log('from DIV buttons::', this.$amrTabName)
            // console.log('from DIV buttons:::', )
        },
    });
    // divButtons.config.globalProperties.$amrTabName = "here" 
    // tabsButtons.config.globalProperties.$amrTabName
    divButtons.mount('#div-buttons');
</script>

I have tried many things as you can see in a commented code (I can't use global variables - I don't know why but it's not working at all)
Any ideas or suggestions

[L0st1]

Hi
How to pass variables between two Vue.js3 instances? Do you need to keep their responsive?
But I am not sure which platform the code runs, and whether it is running on a browser. So the following content may not necessarily be helpful to you.

• createGlobalState
• use localStorage or sessionStoreage to set/get value , use setInterval to keep data in sync
• Or Event Bus(you need to make sure those instances can set or get value from a global object. in a browser, it will be window usually)