Реактивное условие в Vue

Давайте сделаем так, чтобы условие было реактивным. К примеру сделаем так, чтобы элемент прятался по нажатию на кнопку. Пусть у нас есть следующий абзац:

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

Сделаем так, чтобы наш абзац изначально был показан:

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

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

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

Привязанный метод будет менять свойство visible на false, тем самым заставляя наш абзац скрыться:

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