Vue.js Bootstrap4のd-flexはv-showで表示/非表示が制御出来ない(flex!important)

既存のBootstrap4&Jqueryなサイトでちょっと凝った制御が必要になって、Jqueryでjavascriptとdom側の両方を制御するのが辛くなったので部分的にVueを導入してみま
した。

d-flexのdivをv-showで制御する予定が、常に表示されてしまう。

< div v-show="showInfo" class="d-flex justify-content-around">
 表示されちゃう。
< /div>

以前AngulerJSでも似たことがあって、CSSをみてみたらimportantが設定されてる。
v-showはelementStyleでnoneつけてるけど、importantに負けてるので常に表示になってしまった。

.d-flex {
    display: -ms-flexbox!important;
    display: flex!important;
}

今回はrefから参照したい都合でvue-ifで消したくないので、d-flexをdivで囲って回避しました。