Vuejs 2

<div class="col" v-for="(item,i) in subjek" :key="i">

<div class="card bg-light text-dark rounded-0">

<div class="card-body">

<h1 class="text-center">{{average(item)}}%</h1>

<h5 class="card-title text-muted text-center">{{ item }}</h5>

<p class="card-text text-center mb-1" v-for="(item2, i2) in markah(item)" :key="i2">

{{ item2.code }} : <b>{{ item2.mark}}</b>

</p>

</div>

</div>

</div>

computed:{

subjek: function () {

const subjek = new Set();

this.details.forEach(v => subjek.add(v.name))

........

methods:{

markah(nama) {

return this.details

.filter(v => v.name === nama)

.map(vv => vv);

},

update_A: function(){

/// Phase 1

let ccc = this.returnData.filter((v) => { return (v.Name == this.sel_name) })

let ddd = ccc.map((v) => { return v.Course })

ddd = [... new Set(ddd)]

/// Phase 2

let arr = []

ddd.forEach(dd => {

let aaa = this.returnData.filter(v =>