vue项目里怎么使用变量名来渲染组件

<template>
    <div v-for="item in components">
        <component :is="item"/>
    </div>
</template>
<script>
    import basic from "@/components/basic.vue";
    import history from "@/components/history.vue";
    import usersInfo from "@/components/usersInfo.vue";
    import power from "@/components/power.vue";
    export default {
        data(){
            return {
                components: ["basic","history","usersInfo","power"]
            }
        },
        components: {
            basic,
            history,
            usersInfo,
            power
        }
    }
</script>