Consider relocating your afterRenderContent method to the mounted lifecycle hook. It's important to only interact with DOM elements after the component has finished mounting.
mounted() {
this.afterRenderContent()
}
To learn more about lifecycle methods, you can visit: https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram.
Additionally, I see that you are incorporating some vanilla JavaScript in your JS Fiddle. You can utilize refs in Vue to access DOM elements in a more user-friendly manner.
<template>
<h1 ref="header-one">Header One</h1>
</template>
// in your component method or mounted hook
mounted() {
// access the header element
this.$refs['header-one']
}
UPDATE: Taking a closer look, it might be beneficial to connect to the mounted lifecycle method from a child component.
<vue-markdown :source="content" @hook:mounted="afterRenderContent"</vue-markdown>
For more insights on using refs in Vue, check out this informative blog post: https://blog.logrocket.com/how-to-use-refs-to-access-your-application-dom-in-vue-js/