Vue not rendering table correctly - css

Question

I'm trying to render the rows of a table where each row is my custom component <todo-list>, but the resulting rows get rendered outside of my table. Why is this?
Here's a screenshot of the DOM tree which shows what is happening:
My view:
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Dashboard</div>
<div class="panel-body">
<div id="appTest">
<div>#{{error}}</div>
<table class="table-responsive">
<todo-list
v-for="todo in todos"
v-bind:todo-obj="todo"
v-bind:key="todo.id"
:todo-obj.sync="todo"
v-on:usun="deleteTod"
></todo-list>
</table>
<div v-if="isLogged" id="todoText">
<textarea v-model="todoText" cols="53" rows="5"></textarea>
<div id="addButton">
<button v-on:click="addTodo" class="btn btn-success" >Add to do</button>
</div>
</div>
<div v-else>
You have to be
Login
to add new todos
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And here is my component:
Vue.component('todoList', {
props: ['todoObj'],
template: '<tr>' +
'<td><div class="round"><input id="todoObj.id" type="checkbox" v-on:click="toggle" v-model="todoObj.done" /><label for="todoObj.id"></label></div></td>' +
'<td class="textTodo">{{todoObj.description}}</td>' +
'<td><button v-on:click="deleteTodo" class="btn-xs btn-danger">delete</button></td>' +
'</tr>',
Also my checkboxes are not working. They look fine, but they don't toggle when I click them, they only react when checking the first row from the table. Why?

Answer 1

Your table might not be rendering correctly due to DOM Template Parsing Caveats. Try this instead:
<table class="table-responsive">
<tr
v-for="todo in todos"
is="todo-list"
:todo-obj="todo"
:key="todo.id"
#usun="deleteTod"
></tr>
</table>
Also you had the todoObj bound twice (I removed the .sync one in the above code).
As for the checkbox issue, I'm not completely sure on what the problem is, especially since you have not provided the code for the component (a fiddle would be great). Why do you have #toggle and v-model? Couldn't you just use v-model? You also forgot to v-bind to the checkbox's id attribute: id="todoObj.id" (is that necessary anyway?).