来自不同组件的Vue js模式加载

Question

我在contact.vue和support.vue组件中有2个模态，并从header.vue页面加载该组件。

我的代码存在的问题是，它仅在第二次点击时加载了模式组件

ie：当我单击“支持” <a>标记时，它将modalShow设置为1，然后仅在下次单击时支持模态加载。

是否有其他方法可以将模式加载到另一个组件中，而不是使用v-b-modal.modalSupport方法

<a @click ="modalShow=2"   href="#" data-module="contact" v-b-modal.modalContact >
contact
</a>
<a @click ="modalShow=1"   href="#" data-module="support" v-b-modal.modalSupport >
Support
</a>
<quick-support v-if="modalShow==1" ></quick-support>
<quick-contact v-if="modalShow==2" ></quick-contact>


export default {
  name: 'HeaderApp',
  data () {
    return { 
      modalShow: 0
    }
}
}

contact.vue

<template>
  <b-modal  @ok="Create" id="modalContact" size="lg" title="Template" ref="contModal" >
</b-modal >
</template>

support.vue

<template>
  <b-modal  @ok="Create" id="modalSupport" size="lg" title="Template" ref="supportModal" >
</b-modal >
</template>