Reactive condition in Vue

Let's make the condition reactive. For example, let's make the element hide when a button is pressed. Let's say we have the following paragraph:

<template>
	<p v-if="visible">text</p>
</template>

Let's make it so that our paragraph is initially shown:

data() {
	return {
		visible: true,
	}
}

Now let's make a button that will hide the paragraph when clicked:

<template>
	<button @click="hide">hide</button>
	<p v-if="visible">text</p>
</template>

The bound method will change the visible property to false, thus causing our paragraph to hide:

methods: {
	hide: function() {
		this.visible = false;
	}
}

Given a paragraph and a button. Let the paragraph be initially hidden. Make a button that will show the paragraph.

Given a paragraph and two buttons. Let the first button show the paragraph and the second one hide it.

Modify the previous task so that only one of the buttons is always visible on the screen: if the paragraph is shown, then the button to hide, and if it is hidden, then the button to show.