Component shown out of table



Everything in the code shown below works great , except that rows shown by the component are show out of the table that encapsulates the component. I read the documentation which says use ‘is=transaction-brief’. I tried using it in all

tags but did not works.
How can I show from the component inside the table.
In HTML I have
        <tr >
       <transaction-brief  v-for = "post in all_trans"  v-bind:ip1="post"></transaction-brief>

In JS I have a component:

 Vue.component('transaction-brief', {
      data: function () {
                return {
                  boolean1: false
            template: `
                      <tr >
                          <td>{{ip1.created_at}} </td>


<tr is="transaction-brief" v-for = "post in all_trans"  v-bind:ip1="post">