我尝试在一个由语义UI控制的模态上显示一个Vue组件，但是，vue元素没有加载/挂载。我主要使用Laravel和JQuery来处理一些vue元素。
我怀疑这是由于在加载vue元素之前隐藏了modal，但是我不确定当modal显示时如何重新呈现vue元素？
如果我在display: block的普通页面上使用相同的代码，元素将正常显示。
装载刀片组件：

@include('partials.forms.location',['name'=>'location', 'label'=>__(''),'style' => 'full'])

应加载元件的叶片组件：

@component('partials.forms.form-group',['style'=>isset($style) ? $style : null,'label'=>$label, 'name'=>$name])
    <drop-marker-map
        data-name="{{ $name }}"
        data-lat="{{ old($name) ? old($name)['lat'] : null  }}"
        data-lng="{{ old($name) ? old($name)['lng'] : null }}">
    </drop-marker-map>
@endcomponent

Vue模板：

<template>
  <div class="drop-marker-map">
    <p>Navigate to your location or find the correct address in the drop down box.</p>
    <div class="map-wrapper">
      <div class="map" ref="map"></div>
    </div>
    <div class="map-utilities">
      <div class="ui grey basic button locate" @click="geoLocate">Find your location</div>
      <div class="ui grey basic button maker" @click="placeMaker">Place Marker</div>
      <div class="ui grey basic button clear-maker" @click="clearMaker" v-if="this.lat && this.lng">Clear Marker
      </div>
      <div class="ui grey basic button recenter" @click="recenter" v-if="this.lat && this.lng">Recenter Map</div>
    </div>
    <input type="hidden" :name="this.latName" v-model="this.lat">
    <input type="hidden" :name="this.lngName" v-model="this.lng">
  </div>
</template>