Using component as custom renderer for table

[kritik]

I have 2 components:
sidebar.vue

<template>
<div class="sidebar">
        <div class="logo" style="background: #e0f0fa;">DIV</div>
</div>
</template>

<script>
    export default {
        name: 'sidebar',

    }
</script>

and people.vue

<template>
<div class="people">
    <sidebar></sidebar>
    <fish-table
            :columns="columns"
            :data="data"
            :pagination="page"
            :loading="data_loading"
            :expandedRowRender="rowRenderer"
            @change="changeHandler">
    </fish-table>
</div>
</template>

<script>
import Sidebar from './sidebar'
export default {
    name: 'org-people',
    components: {Sidebar}, // saying that I want to use this component
    data: function () {
        return {
            page: {total: 0, current: 1, rows: 15},
            columns: [
                {title: 'Membership ID', key: 'membership_id'},
                {title: 'First name', key: 'first_name'},
                {title: 'Last name', key: 'last_name'},
                {title: 'Grade', key: 'grade'},
            ],
            data: [
            ],
            data_loading: true
        }
    },
    created (){
        this.changeHandler(this.page.current);
    },
    methods: {
        changeHandler (pagination, filters, sorter){
            let params = {
                organization_id: this.$route.params.id,
                page: pagination,
                per: this.page.rows
            }

            this.data_loading = true
            this.$http.get('/api/uploaded_people/', {params: params}).then((res)=> {
                this.data = res.body.object
                this.data_loading = false

                this.page.current = res.body.pagination.page
                this.page.total = res.body.pagination.total
                this.page.rows = res.body.pagination.per
            })

        },
        rowRenderer (h, record){
            debugger
            return h('sidebar', JSON.stringify(record)) // calling sidebar component
        }
    }
}
</script>

When I open additional row renderer h('sidebar', JSON.stringify(record)) gives an error

vue.runtime.esm.js:574 [Vue warn]: Unknown custom element: <sidebar> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <ContentRender> at node_modules/fish-ui/src/components/ContentRender.vue
       <FishTableBody> at node_modules/fish-ui/src/components/TableBody.vue
         <FishTable> at node_modules/fish-ui/src/components/Table.vue
           <OrgPeople> at app/javascript/templates/people.vue
             <OrganizationContent> at app/javascript/templates/organization_content.vue
               <FishLayout> at node_modules/fish-ui/src/components/Layout.vue
                 <App> at app/javascript/app.vue
                   <Root>

What am I doing wrong?

[myliang]

@kritik
Vue.component('sidebar', sidebar)
register global component

[kritik]

Thanks