NavBar.vue

<template>
    <div>
        <nav class="navbar" role="navigation" aria-label="main navigation">
            <div class="navbar-brand">
                <a class="navbar-item">
                    <img class="logo" src="../assets/logo.png" width="177" height="40">
                </a>
                <a role="button" class="navbar-burger burger" :class="{ 'is-active': showNavMobile }"
                   @click="showNavMobile = !showNavMobile" aria-label="menu" aria-expanded="false" data-target="navbar">
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                </a>
            </div>
            <div id="navbar" class="navbar-menu" :class="{ 'is-active': showNavMobile }">
                <div class="navbar-end">
                    <a class="navbar-item">
                        Anuncie seu estoque
                    </a>
                    <RegisterModal>
                        <a class="navbar-item fullheight" @click="setModal">
                            Cadastre-se
                        </a>
                    </RegisterModal>
                    <a class="navbar-item">
                        Entre
                    </a>
                </div>
            </div>
        </nav>
    </div>
</template>

<script>
    import { mapActions } from 'vuex'
    import RegisterModal from "./RegisterModal"
    
    export default {
        name: "NavBar",

        components: {
            RegisterModal
        },

        data() {
            return {
                showNavMobile: false,
            }
        },

        methods: {
          ...mapActions(['setModal'])
        }
    }
</script>

<style scoped lang="scss">
    .navbar-item {
        img {
            max-height: 100%;
        }
    }

    @media(min-width: 960px) {
        .navbar-item {
            padding-top: 20px;
            padding-bottom: 20px;
            img {
                max-height: 100%;
            }
        }

        .logo {
            margin-left: 50px;
        }

        .navbar-end {
            margin-right: 50px;
        }
    }

    .fullheight {
        height: 100%;
    }
</style>

RegisterModal.vue

<template>
    <div>
        <slot></slot>
        <div class="modal" :class="{ 'is-active': getModal }">
            <div class="modal-background"></div>
            <div class="modal-content">
                <div class="box">
                    <h1>Teste</h1>
                </div>
            </div>
            <button class="modal-close is-large" aria-label="close"></button>
        </div>
    </div>
</template>

<script>
    import { mapGetters } from 'vuex'
    export default {
        name: "RegisterModal",

        data () {
            return {
                active: false
            }
        },
        computed: {
          ...mapGetters(['getModal'])
        }
    }
</script>

<style scoped lang="scss">

</style>

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const SET_MODAL = 'SET_MODAL'

export default new Vuex.Store({
    state: {
        showRegisterModal: false
    },
    mutations: {
      [SET_MODAL] (state, data) {
        state.showRegisterModal = !data
      }
    },
    actions: {
      setModal ({commit}, data) {
        commit(SET_MODAL, data)
      }
    },
    getters: {
      getModal (state) {
        return state.showRegisterModal
      }
    }
})