add <tr><td> tag happen trouble using vue.js

Question

I have a table when I create a data it will update

and I want using Vue.js to do

so I to see Vue.js Components and try

<div id="app1">
<table class="table table-bordered">
    <tr>
        <td class="active">name</td>
        <td class="active">pirce</td>
    </tr>
    <my-trtd></my-trtd>        
</table>

JS

Vue.component('my-trtd', {
                        template: '<tr><td>' + 1 + '</td>' +
                                      '<td>' + 2 + '</td></tr>'
                    })
                    new Vue({
                        el: '#app1'
                    })

result

<div id="app1">
<tr>
    <td>1</td>
    <td>2</td>
</tr>
<table class="table table-bordered">
    <tbody>
        <tr>
            ..
        </tr>
    </tbody>
</table>

it's can work. However, is not I want

this is my expented result

<div id="app1">
<table class="table table-bordered">
    <tbody>
        <tr>
            <td class="active">name</td> 
            <td class="active">pirce</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </tbody>
</table>

How to fix it?

Answer 1

Try it like this, as being used in this answer :

<div id="app1">
  <table class="table table-bordered">
      <tr>
          <td class="active">name</td>
          <td class="active">pirce</td>
      </tr>
      <template>
         <my-trtd></my-trtd>        
      </template>
  </table>
</div