Classes CSS via data em Vue

As classes CSS podem ser adicionadas a um elemento dependendo dos valores das propriedades do objeto data. Vamos ver com um exemplo. Suponha que temos as seguintes propriedades:

data() {
	return {
		isActive: true,
		hasError: true,
	}
}

Vamos adicionar classes CSS ao elemento dependendo do valor das nossas propriedades:

<template>
	<p :class="{active: isActive, error: hasError}">
		texto
	</p>
</template>

São dadas as seguintes propriedades:

data() {
	return {
		isValid: true,
		isDisabled: true,
	}
}

Faça com que, dependendo dos valores dessas propriedades, as classes CSS correspondentes sejam adicionadas à tag.