Vue-class-component: Setting name in Component decorator does not work

[kaorun343]

@championswimmer

We have to register a component constructor explicitly to use.

Vue.component('todo-list-item', TodoListItem)

or

@Component({
  components : { TodoListItem }
})
export default class TodoList extends Vue {
}

And, name option is not related to registering components.
https://vuejs.org/v2/api/#name

@Component decorator automatically set class name (for instance, TodoListItem in your case) to name option.

[championswimmer]

Okay ! Thanks ! That solves my problem !

[tenadolanter]

declare className as you component‘s name, this worked for me well

<template>
    <div class='warp'>
            <div  v-for="(widget, index) in data" :key="index"></div>
                <div>show something !</div>
                <my-widget v-if="widget.length >0" :data="widget" ></my-widget>
           </div>
    </div>
</template> 

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
@Component({})
export default class MyWidget extends Vue {
    @Prop()data!: any
}
</script>