Reatividade no framework Vue

Qualquer alteração nos dados de data resulta em uma alteração instantânea na exibição desses dados na página. Esse comportamento do Vue é chamado de reatividade.

Vamos testar na prática. Suponha que temos a seguinte propriedade:

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

Vamos exibir o valor desta propriedade:

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

Vamos criar um botão que, ao ser clicado, alterará nossa propriedade:

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

Agora vamos escrever um método que será chamado ao clicar no botão e alterará a propriedade:

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

Se juntarmos todo o código e clicarmos no botão - o texto na tela mudará reativamente para o outro.

Dada a propriedade text. Exiba o conteúdo desta propriedade em algum parágrafo.

Dado um botão. Faça com que ao clicar nesse botão, o valor da propriedade text mude reativamente para outro.

Dados dois botões. Faça com que ao clicar no primeiro botão, o valor da propriedade text mude reativamente para um valor, e ao clicar no segundo - para outro.