我只是想使用 Vuetify 在 Nuxt/Composition API/TypeScript 项目中使用子组件。我尝试在设置方法之前包含该组件，但当我查看源代码时，我只看到 <!----> 子组件数据应该位于其中。

这是应该显示“嵌套”组件的 layouts/default.vue 布局。

<template>
  <v-app>
    <v-app-bar clipped-left app color="indigo darken-2" />
    <v-content>
      <nuxt />
    </v-content>
    <v-bottom-navigation
      v-model="bottomNav"
      color="indigo darken-2"
      absolute
      class="hidden-sm-and-up"
    >
      <v-btn
        value="search"
        @click="dialog=true"
      >
        <span>Search</span>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>
    </v-bottom-navigation>
    <v-dialog v-model="dialog">
      <ListFilter
        @closeDialog="closeDialog"
      />
    </v-dialog>
  </v-app>
</template>

<script lang="ts">
import { createComponent, ref } from '@vue/composition-api'
import ListFilter from '~/components/ListFilter.vue'
export default createComponent({
  components: { ListFilter },
  setup() {
    const bottomNav = ref<string>()
    const dialog = ref<boolean>(false)
    const closeDialog = () => {
      dialog.value = false
      bottomNav.value = ''
    }
    return {
      bottomNav,
      dialog,
      closeDialog
    }
  }
})
</script>

这是要嵌套的 components/ListFilter.vue 组件的示例内容，其内容无关紧要。

<template>
  <v-card>
    <v-card-title>
      Search
    </v-card-title>
    <v-card-text>
      Test Text
    </v-card-text>
    <v-card-actions>
      <v-btn
        @click="closeDialog"
      >
        Close
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

<script lang="ts">
import { createComponent } from '@vue/composition-api'
export default createComponent({
  setup(_, { emit }) {
    const closeDialog = () => {
      emit('closeDialog')
    }
    return closeDialog
  }
})
</script>