Vue separate counter - laravel-5

Question

I'm new to Vue and I am trying to make a component were a user has to divide 10 points over 4 statements. It looks like this:
If a user clicks on a circle, it will fill and add +1 to a counter. The problem is the counters are all linked. My question is thus: How do I make a separate / independent counter for each statement?
The data in qa contains 4 statements in json with a view properties I later need to bind to the input that are passed to the component via a prop.
Here is my code:
<template>
<div class="counter">
<span>Je mag nog {{ total.counter }} punten verdelen</span>
<div class="row" v-for="n in qa[0]">
<div class="col s4">
<h5>{{ n['title'] }}</h5>
</div>
<div class="col s7">
<span v-for="n in fullCounter"><img v-on:click="subtractCounter" class="circle-image" src="/images/solid-circle.png"></span>
<span v-for="n in emptyCounter"><img v-on:click="addCounter" class="circle-image" src="/images/empty-circle.png"></span>
</div>
<div class="col s1">
<input v-model="fullCounter" type="number" min=0 max=10>
</div>
</div>
</div>
</template>
<script>
let total = {
counter: 10
}
export default {
props: ['qa'],
data() {
return {
total,
fullCounter: 0,
emptyCounter: 10,
}
},
mounted() {
},
methods: {
addCounter: function () {
if(this.fullCounter <= 10 && total.counter > 0) {
this.total.counter -= 1,
this.fullCounter += 1,
this.emptyCounter -= 1
}
},
subtractCounter: function () {
if(this.emptyCounter >= 0) {
this.total.counter += 1,
this.fullCounter -= 1,
this.emptyCounter += 1
}
}
}
}
Can anyone point me in the right direction?
Edit:
here is a GA example:
{
"id": 600226,
"customer_id": 1,
"survey_id": 600006,
"user_id": 1,
"section": 1,
"pos": 2,
"title": null
"Company 1",
"required": 0,
"subtitle": null
}