How do I separate the editing area of Markdown from toolbar using vue-simplemde?

I want to emulate the editor style of GhostBlog and put the toolbar column of markdown at the bottom of the page

related codes

mounted: function () {
                var toolbarOld = document.getElementsByClassName(".editor-toolbar")
                console.log(toolbarOld)
                document.getElementById("toolbar").appendChild(toolbarOld)            
}

but I can"t get the dom node of the child component. Editor-toolbar when I use dom in the parent component.

is there any solution? Thank you