How to set visibility between two apps in vuejs?

Question

Vue.js

There are two

main applications - a personal account on vue
chat - a separate application on vue

in a personal account there is a button in the header - open a chat

How can I launch a modal window in a chat using this button?

I'm trying to do this:
I added the class "toolbar-chat-button" to the button
And added the following code to the chat component

created() {

            document.addEventListener("DOMContentLoaded", function() {

                let crmButton = document.querySelectorAll(".toolbar-chat-button");

                crmButton.forEach(function(button) {
                    button.addEventListener("click", function(event) {
                        this.openChatDialog()
                    });
                });
            });
        },

But the problem is that the personal account application is rendered on vue, then apparently the event handler does not "see" this button

How can you hang the handler on the button after it appears

PS: There is no jQuery on the site, it can be done there, I'm interested in the question js

Answer 1

In an application with a button, generate a CustomEvent on window when clicked.
And in another application, just subscribe to this event.