Почему VUE не подключает компонент внутри другого компоненте?

Question

[Вячеслав Шевченко]

Всем привет. Задача крайне простая. Я создал компонент: Popup.vue

<template>
  <div class="popup" v-if="visibility">
    <div class="popup__overlay" @click="$emit('close-popup')"></div>
    <div class="popup__inner">
      <div class="popup__title-bar">
        <span class="popup__title">{{ title }}</span>
        <button class="popup__close-btn" @click="$emit('close-popup')"></button>
      </div>
      <div class="popup__content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Popup",

  props: {
    title: {
      type: String,
      required: true
    },
    visibility: {
      type: Boolean,
      required: true
    }
  }
}
</script>

<style scoped>

</style>

И второй компонент ConfirmedPopup.vue, который подключает первый:

<template>
    <Popup :title="title" :visibility="visibility">
      <span>{{ question }}</span>
      <button @click="confirmedCallback">Да</button>
      <button @click="$emit('close-popup')">Нет</button>
    </Popup>
</template>

<script>
import Popup from './Popup.vue';

export default {
  name: "Popup",

  components: {
    Popup
  },

  props: {
    title: {
      type: String,
      required: true
    },
    visibility: {
      type: Boolean,
      required: true
    },
    question: {
      type: String,
      required: true,
      default: ''
    },
    confirmedCallback: {
      type: Function,
      required: true
    },
  },

  methods: {

  }
}
</script>

<style scoped>

</style>

Подключаю второй компонент:

<ConfirmPopup :title="'Удаление товара'" :question="('Вы действительно хотите удалить товар #' + item.ID + '')" :visibility=deleteFormVisibility  :confirmed-callback="deleteItem"/>

По получаю ошибку:
Maximum call stack size exceeded
Буд-то я подключаю компоненты рекурсивно, но это не так.

Почему такое может быть?

Answer 1

[Алексей Ярков]

Имена разные дайте им для начала