Stepper dynamic step - code helper

xxxxxxxxxx
 
<template>
  <MDBStepper style="background:#eee">
    <MDBStepperStep active dynamic>
      <MDBStepperHead icon="1">
        Step 1
      </MDBStepperHead>
      <MDBStepperContent>
        <MDBBtn color="primary" @click="addElement">Add element</MDBBtn>
        <ul class="mt-3">
          <li v-for="(item, id) in list" :key="id">{{item}} - <span style="color:red" @click="()=>removeElement(item)">X</span></li>
        </ul>
      </MDBStepperContent>
    </MDBStepperStep>
    <MDBStepperStep>
      <MDBStepperHead icon="2">
        Step 2
      </MDBStepperHead>
      <MDBStepperContent>
        <span>
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
          commodo consequat
        </span>
      </MDBStepperContent>
    </MDBStepperStep>
    <MDBStepperStep>
      <MDBStepperHead icon="3">
        Step 3
      </MDBStepperHead>
      <MDBStepperContent>
        <span>
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
          nulla pariatur
        </span>
      </MDBStepperContent>
    </MDBStepperStep>
  </MDBStepper>
</template>

xxxxxxxxxx
 
<style>
#app {
  font-family: Roboto, Helvetica, Arial, sans-serif;
}
</style>

xxxxxxxxxx
 
<script>
  import { MDBBtn, MDBStepper, MDBStepperStep, MDBStepperHead, MDBStepperContent } from "mdb-vue-ui-kit";
  import {ref} from "vue"
  export default {
    components: {
      MDBStepper,
      MDBStepperStep,
      MDBStepperHead,
      MDBStepperContent,
      MDBBtn
    },
    setup() {
      const list = ref([])
      
      const addElement = () => {
      list.value = [...list.value, `Element nr ${list.value.length}-${Math.floor(Math.random()*100)}`]
      }
      
      const removeElement = (value) => {
       list.value = list.value.filter(el=> el !== value)
      }
      
      return {
        list, addElement, removeElement
      }
    }
  };
</script>

Console errors: 0