vuejs data price total calculation - vue.js

Question

I want to show the total amount from the data, but how can I do it with vue js in the simplest way?
There is a field where I need to write the sum of the balance amounts, but I cannot do much because the room is outside the for.
const app = new Vue({
el: '#app',
data: {
userList: [{
id: 1,
name: "Prem",
gender: "male",
balance:'3522'
},
{
id: 2,
name: "Chandu",
gender: "female",
balance:'2762'
},
{
id: 3,
name: "Jong",
gender: "female",
balance:'2000'
},
{
id: 4,
name: "Steew",
gender: "male",
balance:'2000'
},
{
id: 5,
name: "Abdollah",
gender: "female",
balance:'2000'
},
{
id: 6,
name: "Jerry",
gender: "male",
balance:'1500.5'
}
]
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<script src="https://unpkg.com/vue-router#2.0.0/dist/vue-router.js"></script>
<div id="app">
<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Pice</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, i) in userList" class="position-relative">
<td>{{ user.name }}</td>
<td>{{ user.gender }}</td>
<td>{{user.balance}}<td>
</tr>
</tbody>
<tfoot>
<tr>
<td>total number of records: {{userList.length}}</td>
<td></td>
<td>Total:</td>
</tr>
</tfoot>
</table>
</div>

Answer 1

Define total as a computed property using reduce function as follows :
data: {
userList: [...],
},
computed:{
total(){
return this.userList.reduce((acc,curr)=>{
return acc+=(+curr)
},0)
}
}
}
in template :
<td>Total: {{total}}</td>