I’m not sure if this is technical enough, but the component needs both the <div data-theme-toc="true"> </div> and some headings in the post to be able to generate a proper toc.
Without the <div data-theme-toc="true"> </div> inserted the post will simply be a post with headings, and adding that without including any headings will not generate a toc (there’s also a TOC min heading setting in the component, which defaults to 3. So you’d need at least 3 headers in your post to generate a visible toc)
The ‘insert table of contents’ button inserts the <div data-theme-toc="true"> </div> into the post, though you can copy this in or type it manually to the same effect.
Hopefully that helps. 
ETA: I’ve just had a gentle nudge reminder that if you’re using the Auto TOC categories and Auto TOC tags component settings then inserting the <div data-theme-toc="true"> </div> isn’t necessary in those cases. 