Vue components in vue-markdown

Question

I'm attempting to use VueMarkdown, using a postrender function to add some custom things like so:

template:

<vue-markdown :source="post.body" :postrender="postRender"></vue-markdown>

script:

function postRender(input: any){
  return = input.replace(/(\>|\s)@([a-z0-9-]+)/g,"$1<user :val='$2'></user>");
}

The postrender input is an html string and expects a return of an html string to be used in the DOM. <user/> being a component means it is not compiled, so the output ends up being like:

example <user :val='@user'></user> test

I've looked into a number of options like trying to compile the string before returning, wrapping the vue-markdown in a dynamic component, etc. At this point, I'm sure I'm doing something wrong and probably need to start from the beginning with this. So, how can I use a custom component in a markdown element in Vue?