Emit click in other class in Vue js

Question

I got two Vue js classes that controls different html blocks (I have script tags for each, because I have server side template rendering)

 <li class="nav-item navbar-center" id="site-header">
       <a class="nav-link text-white h6" href="#" v-on:click="displayModal()">
          Log In / Sign Up
       </a>
  </li>

new Vue({
    el: '#site-header',
    delimiters: ['[[', ']]'],
    data: {
        showModal: 'none',
    },
    methods: {
        displayModal() {
            if (this.showModal === 'none') {
                this.showModal = 'block';
            } else {
                this.showModal = 'none';
            }
        },

    },
})

And the second

<div class="row" style="margin-top: 30px" id="car_pre_reserve">
   <textarea v-model="messageSender" id="direct-message" placeholder="Your message here..."></textarea>
   <button v-on:click="sendMessage()" class="button" type="button">SEND MESSAGE</button>
</div>

    new Vue({
        el: '#car_pre_reserve',
        delimiters: ['[[', ']]'],
        data() {
            return {
                messageSender: '',
            }
        },
        methods: {

            sendMessage() {

                        this.messageStatusDisplay = 'block';
                        setTimeout(() => {
                            this.messageStatusDisplay = 'none';
                        }, 10000);

            },
        },
    });

The question is, can I call displayModal() from different vue class? And how to do this?

Answer 1

Hah, that was pretty easy

I assigned class to variable

var header = new Vue({...})

and then in the second class just call header.displayModal()