VueJs component not being replaced with the template - vue.js

Question

When trying to render a component, the template string is rendering not where the component is defined in the HTML. Instead, the rendered HTML is getting rendered outside of my <table>.
Easiest way to describe this is with the code snippet below. Column 2 is appearing outside the <table> altogether, even tho I have <my-th></my-th> directly after my <th>Column 1</th>.
Why is this happening?
Vue.component('my-th', {
props: [],
template: `<th>Column 2</th>`
});
new Vue({
el: "#app"
});
body { background: white; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table>
<thead>
<tr>
<th>Column 1</th>
<my-th></my-th><!-- Column 2 -->
</tr>
</thead>
<tbody>
<tr>
<td>data 1</td>
<td>data 2</td>
</tr>
</tbody>
</table>
</div>

Answer 1

You need to use Vue's special is attribute in this scenario.
The browser will parse the HTML before Vue gets anywhere near it and any elements inside a table that aren't where they're supposed to be will be moved out. The browser doesn't know what a my-th is so it moves it out to before the table.
This is specifically a problem with templates defined in HTML where it will be parsed by the browser first. For the various other ways to specify a template it isn't an issue as Vue can see the template in its original form.
See https://v2.vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats for details.
Vue.component('my-th', {
props: [],
template: `<th>Column 2</th>`
});
new Vue({
el: "#app"
});
body { background: white; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table>
<thead>
<tr>
<th>Column 1</th>
<th is="my-th"></th><!-- Column 2 -->
</tr>
</thead>
<tbody>
<tr>
<td>data 1</td>
<td>data 2</td>
</tr>
</tbody>
</table>
</div>