CSS классы через data в Vue

CSS классы можно добавлять элементу в зависимости от значений свойств объекта data. Посмотрим на примере. Пусть у нас есть следующие свойства:

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

Добавим элементу CSS классы в зависимости от значения наших свойств:

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

Даны следующие свойства:

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

Сделайте так, чтобы в зависимости от значений этих свойств в тег добавлялись соответствующие CSS классы.