Vuejs doesn't render components inside HTML table elements : <p>I want to render a custom component that displays a row inside a table.</p>

<p>I have the following code:</p>

<pre><code>// js file
Vue.component('message-row', {
    data: function () {
        return {
            msg: 'Hello'
        }
    },
    template: '&lt;tr&gt;&lt;td&gt;{{ msg }}&lt;/td&gt;&lt;/tr&gt;'
});

new Vue({
  el: '#app'
});


// html file
&lt;div id="app"&gt;
    &lt;table&gt;&lt;message-row&gt;&lt;/message-row&gt;&lt;/table&gt;
&lt;/div&gt;
</code></pre>

<p>The problem is that the row ends up rendered outside the table! Like this:</p>

<pre><code>&lt;div id="app"&gt;
    &lt;tr&gt;&lt;td&gt;Hello&lt;/td&gt;&lt;/tr&gt;
    &lt;table&gt;&lt;/table&gt;
&lt;/div&gt;
</code></pre>

<p>You can check it out in this JSFiddle <a href="https://jsfiddle.net/eciii/7v6yrf3x/" rel="noreferrer">https://jsfiddle.net/eciii/7v6yrf3x/</a></p>

<p>I'm not sure if this is a bug or I'm just missing something really obvious here...</p>
