Vue 3, what can be the cause of "Failed to resolve component" error?

Question

I am trying to include one component into another component, but I am getting the error "Failed to resolve component: applications-overview-table" in the browser console.

Parent component "src/pages/ApplicationsOverview.vue":

<template>
  <q-page class="flex flex-center">
    <applications-overview-table></applications-overview-table>
  </q-page>
</template>

<script>
import ApplicationsOverviewTable from '../components/application/OverviewTable.vue';

export default {
  name: 'ApplicationsOverviewPage',

  components: [ApplicationsOverviewTable],

  setup() {
    console.log('loading applications overview');

    return {};
  },
};
</script>

<style></style>

Child component "src/applications/OverviewTable.vue":

<template>
  <div class="q-pa-md">
    <q-table title="Aanvragen" :rows="rows" :columns="columns" row-key="name" />
  </div>
</template>

<script>
const columns = [ ... ];
const rows = [ ... ];

export default {
  name: 'ApplicationsOverviewTable',
  setup() {
    return {
      columns,
      rows,
    };
  },
};
</script>

I can see that the parent component is being loaded, because the console message "loading applications overview" is being shown in the console.
I can also see that the path to OverviewTable.vue is correct, because if I change the path I get another error.

I tried to change <applications-overview-table> to <ApplicationsOverviewTable> but this gives me the same error (with the tag-name different of course).
It is right that I should change the CamelCase component name to dash-case in the templete, isn't it?

What am I doing wrong?

Answer 1

components option has an object as value not an array, it should be :

components: {ApplicationsOverviewTable},

this a shorthand of :

components: {
    ApplicationsOverviewTable : ApplicationsOverviewTable
 },