bootstrap navbarにvue.jsのモーダル開く実装 → pointer: cursor; が効かない

Question

現状

Laravel5.5, vue.jsを使用しアプリを開発中
問題点

navbar部分で一つmodalを開くように実装(contact部分)

<div class="collapse navbar-collapse" id="app-navbar-collapse">
    <ul class="nav navbar-nav">
        <a class="navbar-brand" href="{{ url('/about_us') }}">
            about us
        </a>
        <a class="navbar-brand" href="{{ url('/blog') }}">
            Blog
        </a>
        <a class="navbar-brand" id="show-modal" @click="showModal = true">
            Contact
        </a>
        <a class="navbar-brand" href="{{ url('/mypage/chat') }}">
            Chat
        </a>
        //以下省略

しかしこの場合,
cursor: pointer; が効かない
→contactのa部分にクラス付与(単純にclass="contact"), cssで操作
→これでも良いが他に何か賢い方法はないのか？？

と思っております、よろしくお願いいたします。