prop-closable.vue

<template>
  <div>
    <v-alert
      v-model="alert"
      border="start"
      variant="tonal"
      closable
      close-label="Close Alert"
      color="deep-purple-accent-4"
      title="Closable Alert"
    >
      Aenean imperdiet. Quisque id odio. Cras dapibus. Pellentesque ut neque. Cras dapibus.

      Vivamus consectetuer hendrerit lacus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Curabitur blandit mollis lacus. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.
    </v-alert>

    <div
      v-if="!alert"
      class="text-center"
    >
      <v-btn

        @click="alert = true"
      >
        Reset
      </v-btn>
    </div>
  </div>
</template>

<script setup>
  import { computed, ref } from 'vue'

  const alert = ref(true)
  const alertText = computed(() => alert.value ? 'Reset' : 'Show Alert')

  function reset () {
    alert.value = true
  }
</script>

<script>
  export default {
    data: () => ({
      alert: true,
      alertText: 'Reset',
    }),
    computed: {
      alertText () {
        return this.alert ? 'Reset' : 'Show Alert'
      },
    },
    methods: {
      reset () {
        this.alert = true
      },
    },
  }
</script>