Why are my table rows rendered outside the table? DOM template parsing caveats in Vuejs

The problem described here might not be something you run into often, as it mainly applies to situations where you write your HTML template directly in your HTML document. If you use a string template or a single file component, you will not encounter this problem.

When learning or wanting to prototype an idea when using Vuejs quickly, you may choose to place all of your code in a single .html document. Something like this:

<div id="app">
  <h1>WaterBear</h1>
  <table> …

document dom file html javascript parsing something string table template vue vuejs webdev will