How to render bootstrap-vue component that is served from a database

Question

I have a database that has bootstrap-vue components stored and is being used in a vue component.

The data being served from the database is below.

    <b-button>I am a test button</b-button> 

This should be rendered and appear here in the vue component.

<div v-html="page.content"></div> 

By using v-html I only see "I am a test button" when rendered and not the button itself. I have attempted to use the render method but it only outputs the above as a string and does not render an actual button.

Is it not possible to have bootstrap-vue components served dynamically from a database and then rendered? If it is, how could I go about achieving this?

This is the code I am using for the vue component below.

<template>
    <b-row v-if="pageData">
        <b-col lg="12" class="text-left" 
            v-for="page in pageData.pages" 
            :key="page.pageID">
            <h1 v-html="page.title"></h1>
            <sub v-html="page.subtitle"></sub>
            <div v-if="page.heroImage">
                <b-img-lazy :src="showImage(page.heroImage)" right thumbnail></b-img-lazy> 
            </div>
            <div v-html="page.content"></div> 
        </b-col>
    </b-row>
</template> 

<script>
import { getData } from './mixins/getData';

export default {
    name: 'ContentComponent',
    mixins: [getData],
    data: function() {
        return {
            pageData: null,
        }
    },
    methods : {
        showImage(image) {
            if(image) { 
            return this.image = require('../assets/img/'+ image)
        }
    },
    created() {
      this._getData(this.$route.name,'pages');
    }
}
</script>