vue js is showing properties name - vue.js

Question

im pretty new in vue js, im using it to show some data in a table, it is working fine, but... its showing the properties name on the result, can you please help me to verify this?
Admin.html
window.onload = function () {
Vue.component('todo-item', {
props: ['todo']
});
var app1 = new Vue({
el: '#app-1',
data: {
//default row to avoid errors
theUserList: [
{ id: 0, email: 'EMAIL', username: 'USER NAME', status: 'STATUS', gender: 'GENDER', registrationdate: 'REGISTRATION DATE', theurl: 'MODIFY' }
],
currentPage:0
},
methods: {
addData: function () {
if (rawData && rawData != undefined && rawData != null) {
for (y = 0; y < rawData.length; y++) {
this.theUserList.push({ id: rawData[y][0], email: rawData[y][1], username: rawData[y][2], status: rawData[y][3], gender: rawData[y][4], registrationdate: rawData[y][5], theurl: rawData[y][6] });
}
this.theUserList.splice(0, 1);
}
}
}
});
app1.addData();
}
<div id="app-1">
<table class="responsive-card-table unstriped">
<tr><th>Email</th><th>User Name</th><th>Status</th><th>Gender</th><th>Registration Date</th><th>Modify</th></tr>
<tr v-for="item in theUserList"
v-bind:class="{'':true, 'page-item-active':(item.id === currentPage)}"
v-bind:tr="item"
v-bind:key="item.id">
<td>{{ item.email.email}}</td><td>{{item.username}} </td><td>{{ item.status }}</td><td>{{ item.gender}} </td><td> {{item.registrationdate }} </td><td>{{ item.theurl }}</td></tr>
</table>
</div>
the output:
//TH
**Email User Name Status Gender Registration Date Modify Url**
//ROWS
*email:* admin#admin.com *username:* admin *status:* True *gender:* True *registrationdate:* 7-5-2018 *theurl:* theurl

Answer 1

If you want to use your data from rawData, wherever it comes from (props, data or computed property), you need to bind this to use it inside your Vue instance.
To display your data with the addData method when the Vue instance is created, you can return the method inside a created or mounted hook (depends on when your data is loaded).
Example:
new Vue({
el: "#app",
data: {
rawData: [
[1, "john#test.com", "John", "false", "male", "28/02/2018", "http://example.com"],
[2, "jane#test.com", "Jane", "true", "female", "19/02/2018", "http://example.com"]
],
theUserList: [
{ id: 0, email: 'EMAIL', username: 'USER NAME', status: 'STATUS', gender: 'GENDER', registrationdate: 'REGISTRATION DATE', theurl: 'MODIFY' }
],
currentPage:0
},
methods: {
addData: function () {
for (let y in this.rawData) {
this.theUserList.push({ id: this.rawData[y][0], email: this.rawData[y][1], username: this.rawData[y][2], status: this.rawData[y][3], gender: this.rawData[y][4], registrationdate: this.rawData[y][5], theurl: this.rawData[y][6] });
}
this.theUserList.splice(0, 1);
}
},
mounted() {
return this.addData()
}
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
<table class="table">
<thead>
<tr><th>Email</th><th>User Name</th><th>Status</th><th>Gender</th><th>Registration Date</th><th>Modify</th></tr>
</thead>
<tbody>
<tr v-for="item in theUserList" :key="item.id">
<td>{{ item.email}}</td>
<td>{{item.username}} </td>
<td>{{ item.status }}</td>
<td>{{ item.gender}} </td>
<td> {{item.registrationdate }} </td>
<td>{{ item.theurl }}</td>
</tr>
</tbody>
</table>
</div>

Answer 2

someone posted the url
https://jsfiddle.net/1L00jj8z/
based in that, i modified the code to this:
JS
var vueApp = new Vue({
el: "#app",
data() {
return {
theUserList: [],
}
},
created() {
this.addUser();
},
methods: {
addUser() {
return this.theUserList.push({
id: + new Date,
email: '',
username: '',
status: '',
gender: '',
registrationdate: '',
theurl: ''
});
},
addRawUsers() {
if (rawData && rawData != undefined && rawData != null) {
for (y = 0; y < rawData.length; y++) {
this.theUserList.push({
id: '' + rawData[y][0],
email: '' + rawData[y][1],
username: '' + rawData[y][2],
status: '' + rawData[y][3],
gender: '' + rawData[y][4],
registrationdate: '' + rawData[y][5],
theurl: '' + rawData[y][6]
});
}
this.theUserList.splice(0, 1);
}
},
deleteUser(item) {
this.theUserList = this.theUserList.filter(user => user.id !== item.id)
}
}
});
vueApp.addRawUsers();
}
HTML
<div id="app">
<table class="responsive-card-table unstriped">
<tr>
<th>Email</th>
<th>User Name</th>
<th>Status</th>
<th>Gender</th>
<th>Registration Date</th>
<th>URL</th>
<th></th>
</tr>
<tr v-for="item in theUserList" :key="item.id">
<td><input type="text" class="input" v-model="item.email" /></td>
<td><input type="text" class="input" v-model="item.username" /> </td>
<td><input type="text" class="input" v-model="item.status" /></td>
<td><input type="text" class="input" v-model="item.gender" /> </td>
<td><input type="text" class="input" v-model="item.registrationdate" /> </td>
<td><input type="text" class="input" v-model="item.theurl" /></td>
<td><div v-on:click="deleteUser(item)">x</div></td>
</tr>
</table>
thank you all!