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:

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

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

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

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

App.vue<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:

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