Why doesn't emit work?

Question

Vue.js

<div class="news-block" v-for="(news, index) in news" :key="index" @click="showModal = true">
  <div class="news-block__img" :style="`background-image: url(${news.img});`"></div>
  <div class="news__block__right"><span class="news-block__date">{{ news.date }}</span>
      <p class="news-block__text">
  			{{ news.title }}
      </p>
      <span class="news-block__label">Мини-КАСКО</span>
    </div>
    <popup v-if="showModal" @close="showModal = false">
    <div slot="title">{{ news.title }}</div>
  </popup>
</div>

<template id="modal-template">
  <div class="main-news-popup">
    <div class="news-popup">
      <div class="overlay"></div>
      <div class="news-popup__content">
        <div class="news-popup__content__close" @click="$emit('close')"></div>
        <div class="news-popup__content__top">
          <div class="news-popup__content__top__left" style="background-image:url(../../../../static/img/car.jpg)"></div>
          <div class="news-popup__content__top__right">
            <div class="news-popup__content__title">
              <slot name="title"></slot>
            </div>
            <div class="news-popup__content__top__bottom">
              <span class="news-popup__content__top__bottom__date">
                <slot name="date"></slot>
              </span>
              <span class="news-block__label">Рейтинги</span>
            </div>
          </div>
        </div>
        <div class="news-popup__content__bottom">
          <p class="news-popup__content__bottom__p">Рейтинговое агентство RAEX (Эксперт РА) подтвердило рейтинг финансовой надежности ПАО "САК «ЭНЕРГОГАРАНТ» на уровне ruАА- со стабильным прогнозом.</p>
          <p class="news-popup__content__bottom__p">В числе позитивных факторов, влияющих на рейтинг, аналитики выделяют стабильность структуры страхового портфеля, низкую убыточность по основным видам деятельности, низкую зависимость от основных клиентов и финансовый результат, характеризующийся высокими показателями рентабельности собственных средств.</p>
          <p class="news-popup__content__bottom__p">Позитивное влияние на уровень рейтинга оказывает высокое качество активов страховщика, а также высокое отклонение фактического размера маржи платежеспособности от нормативного значения (132,4% на 30.09.2017).</p>
          <p class="news-popup__content__bottom__p">Энергогарант - крупный федеральный страховщик, занимающий существенную долю на российском рынке, что, согласно методологии Агентства, выделяется в качестве фактора поддержки уровня рейтинга. Стратегия компании соответствует текущему состоянию экономики, страховой портфель компании характеризуется высокой диверсификацией по видам и географии деятельности, говорится в пресс-релизе RAEX.</p>
          <a class="news-popup__content__bottom__a" href="#">https://raexpert.ru/releases/2017/Dec26</a>
        </div>
      </div>
    </div>
  </div>
</template>

Answer 1

And where did you get the idea that emit does not work, how will you prove your words?
I think so - everything works, you just forgot about the bubbling of events. You click on .news-popup__content__close, the click event is fired, it is handled - emit is executed, the close event is fired, it is handled in the appropriate handler, the popup is removed. At the same time, the click event has not gone anywhere, it pops up, and it is .news-blockprocessed again - the just-deleted popup is rendered again. Well, outwardly it all looks like nothing happened.
What to do? It is clear that - to stop the ascent, i.e.,
change to
PS And why do you have a separate popup for each element .news-block, what kind of game is this?