如何解决在“ NuxtJS”上显示组件“ vue-isotope”的问题

Question

我将vue同位素与Nuxt JS一起使用在组件中。来自vue-isotope组件内部循环的数据是由根页面中提供的asyncData计算的。

当我重新加载页面“ F5”时，我的问题出现了，同位素建造的容器没有高度并且显示效果不好（请参见下图），我认为通过在jquery中触发触发器来重新生成同位素来找到解决方案零件。但是，我想征求您的意见，因为有些事情我不太了解，也许您可​​以给我另一种选择。

当我使用“ nuxt-link”显示器时，显示效果完美，为什么会有这种区别？

下面的代码段：

<isotope 
    v-if="data.length > 0" 
    ref="cpt" 
    id="root_isotope1"
    :item-selector="'element-item'"
    :list="data"
    :options='option'
    @filter="filterOption=arguments[0]"
>
    <div
        v-for="(value, index) in data"
        :key="index"
        :class='[value.type.slug]'
        class="masonry-item col-lg-6 col-md-6 col-sm-6 m-b30"
    >

... some code

    </div>                 
</isotope>

... some code

computed: {
        ...mapState({
            data: state => state.accommodations.list

... some code

错误显示 正常显示