<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
  <input type="text" v-model="block" v-on:keyup.enter="add" />
  <button @:click="add()">Добавить</button>

  <ol style="display: flex; gap: 10px; flex-flow: wrap;">
    <li v-for="item of blocks" :key="item.name">
      <p class="">{{ item.name }}</p>

      <button v-on:click="blockDelete(item)">Удалить</button>
    </li>
  </ol>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      block: "Default",
      blocks: [{ name: "Блок 1" }, { name: "Блок 2" }]
    };
  },
  methods: {
    add() {
      const newBlock = {
        name: this.block,
      };
      this.blocks.push(newBlock);
      this.block = "";
    },
    blockDelete(deleteBlock) {
      this.blocks = this.blocks.filter((item) => item != deleteBlock);
    }
  }
};
</script>