Dynamic Tabs with Add and Remove Functionality in VueJS

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <h3>Vue Js Dynamic Tab added or delete method</h3>
    <div id="app">
          <div class="tabs">
                <ul class="tab-header">
                    <li v-for="(tab, index) in tabs" :key="index" :class="{ 'active-tab': activeTabIndex === index }"
                        @click="setActiveTab(index)">
                        {{ tabTitle(index) }}
                    </li>
                    <span class="add-remove-icons">
                        <span class="add-tab-icon" @click="addTab">+</span>
                        <span v-if="activeTabIndex !== null" class="remove-tab-icon"
                            @click="removeTab(activeTabIndex)">&times;</span>
                    </span>
                </ul>
                <div class="tab-body">
                    <slot v-for="(tab, index) in tabs">
                        <div v-if="activeTabIndex === index">
                            {{ tab.body }}
                        </div>
                    </slot>
                </div>
            </div>
        </template>
  </div>
  <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    tabs: [
                        {
                            title: "Tab 1",
                            body: "This is the body of Tab 1"
                        }
                    ],
                    activeTabIndex: 0
                };
            },
            methods: {
                setActiveTab(index) {
                    this.activeTabIndex = index;
                },
                addTab() {
                    const newTab = {
                        title: `Tab ${this.tabs.length + 1}`,
                        body: `This is the body of Tab ${this.tabs.length + 1}`
                    };
                    this.tabs.push(newTab);
                    this.activeTabIndex = this.tabs.length - 1;
                },
                removeTab(index) {
                    this.tabs.splice(index, 1);
                    this.activeTabIndex = this.tabs.length ? 0 : null;
                },
                tabTitle(index) {
                    return `Tab ${index + 1}`;
                }
            },
        });
</script>
    <style>
        .add-remove-icons {
            float: right;
        }

.add-tab-icon,
        .remove-tab-icon {
            cursor: pointer;
            display: inline-block;
            margin-left: 10px;
        }

.tabs {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

.tab-header {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
            border-bottom: 1px solid gray;
        }

.tab-header li {
            padding: 10px 20px;
            cursor: pointer;
        }

.tab-header .active-tab {
            background-color: lightgray;
            border-bottom: 2px solid black;
        }

.tab-body {
            padding: 20px;
        }

.add-tab-icon {
            font-size: 24px;
            margin-left: auto;
            cursor: pointer;
        }
    </style>

</body>

</html>