Nuxt构建后自引用Vue组件无法渲染问题求助

我基于Vue实现了一个支持层级选项的自定义下拉组件，开发环境下组件功能正常，但执行nuxt build构建项目并通过nuxt start启动后，子组件无法正常渲染。

组件代码 #

Dropdown.vue #

<template>
  <div class="dropdown" v-click-outside="setInactive">
    <div class="dropdown__single">
      <div class="dropdown__select dropdown__select--hidden">
        <select @change="$emit('onValueChange', value)">
          <template>
            <option :value="value" selected> Select option</option>
            <option :value="value"> option A</option>
          </template>
        </select>
      </div>

      <div class="dropdown__custom-select " :class="{...}">
        <span class="dropdown__custom-current" @click="showList"
              :class="{...}">
            {{ values[0] || 'Select option' }} 
        </span>
        <ul class="dropdown__custom-list" v-if="params.itemparams">

          <DropdownItem @changeListener="onChildValueChange" :params="item" v-for="(item, index) in params.itemparams"
                        :key="index" :active="false" :index="index" :depth="1" @opened="onChildOpened"
                        @closed="onChildClosed"/>
        </ul>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'nuxt-property-decorator';
import DropdownItem from './DropdownItem.vue';

@Component({
  components: {
    DropdownItem
  },
})
export default class Dropdown extends Vue {
...
}
</script>

DropdownItem.vue（自引用组件） #

<template>
  <li :class="...">

    <span v-else :class="{ 'dropdown__custom-list-item-span': subChildsHasNoItems() }"
          @click="emitChange()">
      {{ params.headline }}
    </span>

    <ul v-if="subChildrenHaveItems()" class="dropdown__custom-sublist">
      <DropdownItem v-for="(item, index) in params.subChildren" :index="index" :key="`${depth},${index}`" :params="item"
                    :depth="depth + 1"
      />
    </ul>
  </li>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'nuxt-property-decorator';

@Component({
  components: {
    DropdownItem
  }
})
export default class DropdownItem extends Vue {
...
}
</script>

渲染差异对比 #

开发环境（nuxt启动）正常渲染DOM： #

<div class="dropdown__single"> <!-- 下拉组件渲染完成 -->
    <div class="dropdown__select dropdown__select--hidden">
      <select>
        <option selected="selected" value="option Q"> Select option</option>
        <option value="option Q"> option A</option>
      </select>
    </div>
    <div class="dropdown__custom-select dropdown__custom-select--active">
      <span class="dropdown__custom-current dropdown__custom-current--active">Select option </span>
      <ul class="dropdown__custom-list">
        <li class="dropdown__custom-list-item--parent"> <!-- 第一个DropdownItem组件渲染完成 --> 
          <span
              class="dropdown__custom-list-item-span dropdown__custom-list-item-span--with-children dropdown__custom-list-item-span--with-children--active">
            <span class="dropdown__custom-list-item-span-checkbox"></span>
            <span class="dropdown__custom-list-item-span-content">Option A</span>
          </span>
          <ul class="dropdown__custom-sublist">
            <li class="dropdown__custom-list-item--parent"> <!-- 第二个DropdownItem组件渲染完成 -->
              <span class="dropdown__custom-list-item-span dropdown__custom-list-item-span--with-children">
                <span class="dropdown__custom-list-item-span-checkbox"></span> 
                <span class="dropdown__custom-list-item-span-content">Option AA</span>
              </span>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>

生产环境（nuxt build + nuxt start）异常渲染DOM： #

<div class="dropdown__single">  <!-- 下拉组件开始渲染 -->
    <div class="dropdown__custom-select dropdown__custom-select--active dropdown__custom-select--transparenz">
      <span class="dropdown__custom-current dropdown__custom-current--active">Select option </span> 
      <ul class="dropdown__custom-list">
        <li class="dropdown__custom-list-item--parent"> <!-- 第一个DropdownItem组件开始渲染 -->
          <span class="dropdown__custom-list-item-span dropdown__custom-list-item-span--with-children dropdown__custom-list-item-span--with-children--active">
            <span class="dropdown__custom-list-item-span-checkbox"></span> 
            <span class="dropdown__custom-list-item-span-content">AS-Interface (112)</span>
          </span> 
          <ul class="dropdown__custom-sublist">
            <dropdownitem index="0" params="[object Object]" depth="2"></dropdownitem> 
            <!-- 错误：此处应渲染第二个DropdownItem组件，但未渲染内容 -->
          </ul>
        </li>
      </ul>
    </div>
  </div>

问题 #

为什么Nuxt构建项目后，自引用的DropdownItem组件无法正常渲染？如何解决这个问题？

内容的提问来源于stack exchange，提问作者ease-it