Sort.vue

<template>
	<div class="d-inline-block position-absolute ml-2">
		<div
			class="up"
			:class="{
				sorted: currentSortDir == 'desc' && currentSort == fieldName,
				invisible: currentSortDir == 'asc' && currentSort == fieldName
			}">
			▲
		</div>
		<div
			class="down"
			:class="{
				sorted: currentSortDir == 'asc' && currentSort == fieldName,
				invisible: currentSortDir == 'desc' && currentSort == fieldName
			}">
			▼
		</div>
	</div>
</template>
<script>
export default {
	props: {
		fieldName: {
			type: String,
			required: true
		},
		currentSort: {
			type: String,
			required: true
		},
		currentSortDir: {
			type: String,
			required: true,
			validator: function (value) {
				return ["asc", "desc"].indexOf(value) !== -1
			}
		}
	},
	created() {
		console.log("created")
	}
}
</script>