how to separate concerns

<div class="score-row" v-for="player in players">
	<p><button @click="removePlayer(player.id)">x</button></p>
	<p class="player">{{ player.name }}</p>
	<p class="total">Total<br><strong>{{ total(player) }}</strong></p>
	<p class="points">This hole<br><strong>{{ player.points[hole - 1] }}</strong></p>
	<p><button @click="$set(player.points, hole - 1, player.points[hole - 1] + 1)">+</button></p>
	<p><button @click="$set(player.points, hole - 1, player.points[hole - 1] - 1)">-</button></p>
</div>