Self-referencing Vue component not rendering in built nuxt project

I am implementing a custom dropdown component using Vue. The dropdown component itself can contain a hierarchy of selectable items. The linked screenshot describes its purpose pretty well, I guess. Dropdown component

The two components I use for this are listed below.

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>

This component is the basic dropdown component. The following component is the dropdown item referenced by the dropdown component:

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>

This component renders fine in case I run nuxt. This means, that if I click on a DropdownItem that has children itself all those referenced DropdownItems are rendered as desired in the DOM:

<div class="dropdown__single"> <!-- Here the dropdown component is rendered -->
    <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"> <!-- the first dropdown item component is rendered --> 
          <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"> <!-- the second dropdown item component is rendered -->
              <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>

But once I build the project using nuxt build and start it afterwards (nuxt start) the child components are not rendered anymore:

<div class="dropdown__single">  <!-- Here the dropdown component starts -->
    <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"> <!-- here the first dropdown item component starts -->
          <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> 
            <!-- ERROR: here the second dropdown item component should be rendered but it is not -->
          </ul>
        </li>
      </ul>
    </div>
  </div>

Can anyone help me fixing this problem and tell me why the built nuxt project does not render the self-referencing component?

Edit: I added the import statement to the Dropdown.vue class for clearification.