vue递归组件+动态组件的问题

Question

我有多个组件，我需要根据变量type来判断是显示那个组件。
之前我用的是is动态添加组件的方式(可以正常运行)，但这样必须要在.vue中注册相关组件才行：

<template>
    <div class="zzjz-view-content">
        <!--<widget-btn></widget-btn>-->
      
        <keep-alive>
            <div v-for="widget in widgetArr">
                <component v-bind:is="widget.type"></component>
            </div>
        </keep-alive>
    </div>
</template>
<script>
    import WidgetBtn from '../../../components/Btn.vue';
 import WidgetImg from '../../../components/Img.vue';
export default {
data(){
return {
widgetArr:[{type:'WidgetBtn'},{type:'WidgetImg'}]}},
 components: {
      WidgetBtn,
     WidgetImg
}
}
</script>

现在我希望使用全局注册组件的方式操作：(main.js)

  import WidgetBtn from '../../../components/Btn.vue';
 import WidgetImg from '../../../components/Img.vue';
Vue.component('widget-btn', WidgetBtn);
Vue.component('widget-img', WidgetImg);

new Vue({...}) // 创建实例...

<template>
    <div class="zzjz-view-content">
        <!--<widget-btn></widget-btn>-->
      
        <keep-alive>
            <div v-for="widget in widgetArr">
                <component v-bind:is="widget.type"></component>
            </div>
        </keep-alive>
    </div>
</template>
<script>
export default {
data(){
return {
widgetArr:[{type:'WidgetBtn'},{type:'WidgetImg'}]}},
 components: {}
}
</script>

但是报错：但是我明明已经全局注册了相关组件呢？希望大家能够帮我下哈，谢谢啦！