How to replace shortcodes with components?

Question

Vue.js

How to replace shortcode with component after parsing and substitution ?

import Vue from 'vue';
  import TitleElementNew from '@/components/elements/TitleElementNew';

  export default {
    name: "ContentArticle",
    data: function () {
      return {
        text: '<p>Hello world {sample}</p>',
      }
    },
    methods: {
      replaceShortCodes(text) {
        text = text.replace('{sample}', `<TitleElementNew>H</TitleElementNew>`);

        return text;
      }
    },
    render: function(createElement) {
      const template = this.replaceShortCodes(this.text)

      const component = Vue.component('cont', {
        template: template,
        components: {
          'TitleElementNew': TitleElementNew
        }
      })

      return createElement(
        'div',
        {
          class: 'content-article',
        },
        [
          createElement(component)
        ]
      )
    }
  }

I'm trying with Vue.component but getting errors ?