Как поставить alert используя i18n Vue 3 Cli?

Спасибо, заработало, а можно спросить, почему если перевод хранится в en.json/ru.json я вижу ошибку

shared.esm-bundler.js?f83d:54 [intlify] Not found 'hello' key in 'en' locale messages.
warn @ shared.esm-bundler.js?f83d:54
shared.esm-bundler.js?f83d:54 [intlify] Fall back to translate 'hello' with root locale.

Но если опишу

<i18n>
{
  "en": {
    "hello": "hi"
  },
  "ru": {
    "hello": "привет"
  }
}
</i18n>

Всё работает

Почему vue ругается на myMap.delete(mapKey)?

Простите, но я всё равно не понимаю как решить проблемму с удалением елемента из map((
@click="delete messages.get(mapKey)" не работает...
a @click="messages.delete(mapKey)" ругается...
ESLint + Prettier +Webpack — Vue 2

Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error)

Почему vue ругается на myMap.delete(mapKey)?

0xD34F, но я вить не использою унарный оператор, нигде (я знаком только с унарным + -)... К примеру в документацци по map для удаления описывается delete... https://developer.mozilla.org/ru/docs/Web/JavaScri...

Как реализовать падение элементов при удалении элемента(-ов)?

Aetae, Спасибо, а можно ли придумать чтото типа выставления каждому елементу top относительно его индекса, и когда индекс уменьшелся то поставиь всем елементам top по ниже... или такая реализацыя будет подвисать если елементов много...
Я так понимаю реализовать ето через transition-group не получится раз top опсывается по скрипту...

Как реализовать падение элементов при удалении элемента(-ов)?

Пример кода компонента
через высоту

<template>
  <div class="messenger">
    <transition-group name="msgAnimation" tag="div">
      <div v-for="(obj, i) in messages" :key="obj.key" class="wrapper">
        <div class="wrapper__block" @click="messages.splice(i, 1)">
          {{ obj.msg }}
        </div>
      </div>
    </transition-group>
  </div>
</template>
<style lang="scss" scoped>
$height-block: 9vmin;
$height-margin: 1vmin;
$transition: 0.5s;
$scroll-width: 0.5vmin;

.messenger {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  .wrapper {
    * {
      box-sizing: border-box;
    }
    width: 100%;
    height: $height-block + $height-margin;

    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;

    &__block {
      background: rgba(42, 29, 29, 0.8);
      height: $height-block;
      width: 100%;
      overflow: hidden;
      margin-top: $height-margin;

      font-size: 2vmin;
      padding: $height-margin;
      color: white;

      display: flex;
      align-items: center;
      justify-content: center;

      overflow-x: hidden;
      overflow-y: auto;

      //word-wrap: break-word;
      word-break: break-all;
      flex-wrap: wrap;

      &::-webkit-scrollbar {
        width: $scroll-width;
        height: 100%;
      }
      &::-webkit-scrollbar-thumb {
        background: #e93535;
        border-radius: $scroll-width / 2;
      }
    }
  }

  .msgAnimation-enter,
  .msgAnimation-leave-to {
    animation: anim $transition * 2 linear;

    @keyframes anim {
      0% {
      }
      50% {
        opacity: 0;
        height: $height-block + $height-margin;
      }
      100% {
        opacity: 0;
        height: 0;
      }
    }
  }
}
</style>
<script>
export default {
  name: "Messenger",
  data() {
    return {
      totalAmount: 0,
      messages: [{ key: 0, msg: "Are u hacker" }],
    };
  },

  created() {
    
window.authorizationMessage = 
      function (msg) {
        this.totalAmount++;
        this.messages.push({ key: this.totalAmount, msg: msg });
      }.bind(this)
    

};
</script>

для добавления нескольких блоков нужно вызвать authorizationMessage("msg");

Как реализовать падение элементов при удалении элемента(-ов)?

Ну ето работает, но если нажать не несколько кнопок которые будут уменшать высоту - ето будет не очень плавно - вить скорость падения будет увеличиватся...