Reactivity in the Vue framework

Any change to data from data causes an immediate change in the display of this data on the page. This behavior of Vue is called reactivity reactance.

Let's check it in practice. Let's say we have the following property:

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

Let's derive the value of this property:

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

Let's make a button that will change our property when clicked:

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

Now let's write a method that will be called when a button is clicked and change the property:

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

If you put all the code together and press the button, the text will appear on the screen reactive reactively will be replaced by another.

Given a property text. Display the contents of this property in some paragraph.

Given a button, make it so that when you click on this button, the value of the text property changes to another one.

Given two buttons, make it so that when you click the first button, the value of the text property changes reactively to one value, and when you click the second button, to another.