Register local component when using vue-property-d

Question

Just learning Vue and TypeScript with class based components, my single file component looks like this:

<template>
    ...
    <div>
        <contact-component v-bind:key="c.id" v-for="c in contacts">
        </contact-component>
    </div>
</template>

<script lang="ts">
import ContactComponent from "./Contact.vue";
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class ContactsComponent extends Vue {
    data() {...}
    components = { ContactComponent }
}
</script>

It generates the following error:

Unknown custom element: - did you register the component correctly?

Obviously my registration of the component does not work, but I have no idea how to fix this in TypeScript. What's the correct way to register ContactComponent so that it can be used in the above template?

Answer 1

like this

@Component({
  components: { ContactComponent }
})
export default class ContactsComponent extends Vue {}