Why doesn't the v-if="isSubmit" condition work?

Question

Vue.js

There is a cart on Vue. It shows three blocks depending on the conditions:
the basket itself with the contents (if the product is added and is in localStorage), an
empty basket (if the product is not available, respectively) and
a notification about the product sent for clearance when you click on the "send" form button.
The latter does not can be displayed on the screen. Maybe I'm creating the condition incorrectly?
This is my cart template.

<template>
<div>
  <div
    class="cells"
    v-if="PRODUCTS.length && !isSubmit">
    <div class="cell cell-xl-8">
      <cart/>
    </div>
    <cart-form/>
  </div>
  <div class="page-message" v-else-if="PRODUCTS.length===0  && !isSubmit">
    <div class="page-message__icon">
      <svg width="25" height="22" viewBox="0 0 25 22" fill="none" xmlns="http://www.w3.org/2000/svg">
        ...........</svg>
    </div>
    <div class="page-message__title">Ваша корзина пуста</div>
    <div class="page-message__text">Выберите в каталоге интересующий товар и добавьте в корзину</div>
    <div class="page-message__action">
      <a class="button button-secondary" href="catalog.html">
        <div class="button__body">Перейти в каталог</div>
        <div class="button__icon">
          <svg width="7" height="10" viewBox="0 0 7 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1 9L5 5L1 1" stroke="currentColor" stroke-width="2"></path>
          </svg>
        </div>
      </a>
    </div>
  </div>
  <div
    v-if="isSubmit"
    @showSuccessNotification="showSuccessNotification()"
    @addAnOrder="addAnOrder()">
    <div class="page-message">
      <div class="page-message__icon">
        <svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
          ........</svg>
      </div>
      <div class="page-message__title">Ваш заказ успешно оформлен</div>
      <div class="page-message__text">Ваша заявка успешно отправлена!<br>
        В течение 5 минут мы Вам перезвоним
      </div>
      <div class="page-message__action">
        <a class="button button-secondary" href="index.html">
          <div class="button__body">Перейти на главную</div>
          <div class="button__icon">
            <svg width="7" height="10" viewBox="0 0 7 10" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1 9L5 5L1 1" stroke="currentColor" stroke-width="2"></path>
            </svg>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>
</template>
<script>
import cart from './components/cart.vue'
import cartForm from './components/cart-form.vue'
import {mapActions, mapGetters} from 'vuex'
import axios from 'axios'
export default {
  components: { cartForm, cart },
  data() {
    return {
      isSubmit: false
    }
  },
  name: "app",
  computed: {
    ...mapGetters([
      'PRODUCTS',
      'DEACTIVATE_CART_STATUS',
      'DELETE_ALL_PRODUCTS_FROM_CART',
      'CHANGE_LOCALSTORAGE'
    ])
  },
   methods: {
    ...mapActions([
      'SET_PRODUCTS_TO_STATE'
    ]),
    showSuccessNotification() {
      this.isSubmit = true
    },
    addAnOrder() {
      axios.post('http://localhost:3000/products')
    .then(response => console.log(response));
    }
   },
  mounted() {
      this.SET_PRODUCTS_TO_STATE();
  }
}
</script>

I pass all the methods from the "child" - the form itself

<template>
  <div class="cell cell-md-8 cell-lg-6 mx-auto cart__form cell-xl-4">
    <form
      class="custom-form collapsing-form"
      action="#"
      @submit.prevent="onSubmit">
      <div class="form__header">
        <div class="form__title">Оформить заказ</div>
        <div class="form__description">Заполните форму, и наш менеджер<br>свяжется с Вами в ближайшее время</div>
        <div class="form__message">
          <div class="form__success">
            <div class="form__message__text">Ваша заявка успешно отправлена!</div>
          </div>
        </div>
      </div>
      <div class="form__bg">
        <div class="form__body">
          <label class="form__field form__field--required"><span class="form__label">Телефон</span>
            <input
              class="form__input"
              type="tel"
              required=""
              inputmode="text"
              v-model="tel">
          </label>
          <label class="form__field form__field--required"><span class="form__label">Email</span>
            <input
              class="form__input"
              type="email"
              required=""
              v-model="email">
          </label>
          <label class="form__field"><span class="form__label">Текст сообщения</span>
            <textarea
              class="form__input"
              rows="3"
              v-model="text">
            </textarea>
          </label>
          <div class="form__submit">
            <button
              class="button button-submit"
              type="submit"
              @click="showSuccessNotification">Отправить</button>
          </div>
          <div class="form__note">Нажимая на кнопку «Отправить», подтверждаю свое согласие с&nbsp;<a href="policy.html">условиями обработки персональных данных</a></div>
        </div>
      </div>
    </form>
  </div>
</template>
<script>
export default {
  name: 'cart-form',
  data() {
    return {
     tel: '',
     email: '',
     text: ''
    }
  },
  methods: {
    showSuccessNotification() {
      this.$emit('showSuccessNotification');
    },
    onSubmit() {
      let newOrder= {
        tel: this.tel,
        emai: this.email,
        text: this.text
      }
      this.$emit('addAnOrder', newOrder)
    }
  }
}
</script>

It seems to me that my showSuccessNotification() method is not working. How in this case to write a condition for display of my notification?

Answer 1

Where will the showSuccessNotification event come from on the div if it is emitted by the cart-form component?

Answer 2

Event names are specified in kebab-case, try

@show-success-notification="showSuccessNotification()"

and
this.$emit('show-success-notification');
respectively.
PS Hard here WISIWYG-editor...