Foundation手风琴不会在VueJS v-if条件下初始化

Question

我的手风琴内容有问题。这是我的代码

<template v-if="(claimGroupType == 'Pro-Risk' || claimGroupType == 'Liability' || claimGroupType == 'Property' || claimGroupType == 'Corporate-Travel')">
    <ul class="accordion" data-responsive-accordion-tabs="accordion medium-tabs large-accordion" data-allow-all-closed="true">
        <li class="accordion-item is-active" data-accordion-item>
            <a href="#" class="accordion-title"><h3 class="ins-subheader">Loss Information</h3></a>
            <div class="accordion-content" data-tab-content>

                <div class="grid-x">
                    <div class="cell large-12">
                        <div class="grid-x grid-padding-x">
                            <div v-for="claim in lossFieldsInformation" class="cell large-6 padding-bottom-1">
                                <claim-field ref="claimField"
                                    v-bind:claim-name="claim.name"
                                    v-bind:claim-field-type="claim.field_type"
                                    v-bind:claim-required="claim.required"
                                    v-bind:claim-value="claim.value"
                                    v-bind:claim-abide-pattern="getAbidePattern(claim.field_type)"
                                    v-bind:claim-label="claim.label"
                                    v-bind:claim-radio-checkbox-field-options="getRadioCheckboxFieldOptions(claim.label)"
                                    v-bind:claim-field-options="claim.options"
                                ></claim-field>
                            </div>
                        </div>
                    </div>
                    <div class="cell auto"></div>
                </div>
            </div>
        </li>
    </ul>
</template>

问题是当我在页面上访问它时，似乎基础手风琴没有初始化。

构建结构的屏幕截图：https://cbo.d.pr/2CBiF3

但是当我删除v-if条件时，它将起作用。