Реактивность в фреймворке Vue

Любое изменение данных из data приводит к мгновенному изменению отображения этих данных на странице. Такое поведение Vue называется реактивность.

Давайте проверим на практике. Пусть у нас есть следующее свойство:

data() {
	return {
		text: 'xxx',
	}
}

Выведем значение этого свойства:

<template>
	{{ text }}
</template>

Сделаем кнопку, по нажатию на которую будет меняться наше свойство:

<template>
	{{ text }}
	<button @click="change">text</button>
</template>

Напишем теперь метод, который будет вызываться по клику на кнопку и изменять свойство:

methods: {
	change: function() {
		this.text = 'yyy';
	}
}

Если собрать весь код вместе и нажать на кнопку - текст на экране реактивно поменяется на другой.

Дано свойство text. Выведите содержимое этого свойства в каком-нибудь абзаце.

Дана кнопка. Сделайте так, чтобы по клику на эту кнопку значение свойства text реактивно менялось на другое.

Даны две кнопки. Сделайте так, чтобы по клику на первую кнопку значение свойства text реактивно менялось на одно значение, а по клику на вторую - на другое.