Setting name in Component decorator does not work

[championswimmer]

Here is my current code that works, because I explicitly register the component
(this is the <script> part of a Single File component)

  import Todo from '@/models/todo'
  import {Vue, Prop, Component} from 'vue-property-decorator'

  @Component({
    name: 'todo-list-item' // <---didn't work
  })
  class TodoListItem extends Vue {

    @Prop({default: false})
    todo: Todo
  }
  Vue.component('todo-list-item', TodoListItem) // <---so have to do this
  export default TodoListItem

I believe, this should have worked,

  import Todo from '@/models/todo'
  import {Vue, Prop, Component} from 'vue-property-decorator'

  @Component({
    name: 'todo-list-item' //<--- should work
  })
  export default class TodoListItem extends Vue {

    @Prop({default: false})
    todo: Todo
  }

The error I get (with code sample 2) is

[Vue warn]: Unknown custom element: <todo-list-item> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

When I include this component from any other place

[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>

[peterlevel1]

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>

issues would come out when uglifying this code, you would get some error about the name of MyWidget, MyWidget would be turned into some U, G, Af ...