Adding uuid to Vuetify datatable crud results in new items ending up with duplicate uuid

I have been using Vuetify CRUD example from https://vuetifyjs.com/en/components/data-tables/#crud-actions.

I want to add a a unique id for each record. I have taken their original code pen and copied it importing uuid library here. A sample of js is below. https://codepen.io/joomkit/pen/MWExOGK?editors=1011

import * as uuid from "https://cdn.skypack.dev/uuid@8.3.2";
console.log(uuid.v4())
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    dialog: false,
    dialogDelete: false,
    headers: [
      {id: 'ID', value: 'id'},
      {
        text: 'Dessert (100g serving)',
        sortable: false,
        value: 'name',
      },
      { text: 'Calories', value: 'calories' },
      { text: 'Fat (g)', value: 'fat' },
      { text: 'Carbs (g)', value: 'carbs' },
      { text: 'Protein (g)', value: 'protein' },
      { text: 'Actions', value: 'actions', sortable: false },
    ],
    desserts: [],
    editedIndex: -1,
    editedItem: {
      id: uuid.v4(),      
      name: '',
      calories: 0,
      fat: 0,
      carbs: 0,
      protein: 0,
    },
    defaultItem: {
      id: uuid.v4(),      
      name: '',
      calories: 0,
      fat: 0,
      carbs: 0,
      protein: 0,
    },
  }),

  computed: {
    formTitle () {
      return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
    },
  },

  watch: {
    dialog (val) {
      val || this.close()
    },
    dialogDelete (val) {
      val || this.closeDelete()
    },
  },

  created () {
    this.initialize()
  },

  methods: {
    initialize () {
      this.desserts = [
        {
          id: '1',
          name: 'SFrozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
        },
        {
          id: '2',
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
        },
        {
          id: '3',          
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
        },
      ]
    },

    editItem (item) {
      this.editedIndex = this.desserts.indexOf(item)
      this.editedItem = Object.assign({}, item)
      this.dialog = true
    },

    deleteItem (item) {
      this.editedIndex = this.desserts.indexOf(item)
      this.editedItem = Object.assign({}, item)
      this.dialogDelete = true
    },

    deleteItemConfirm () {
      this.desserts.splice(this.editedIndex, 1)
      this.closeDelete()
    },

    close () {
      this.dialog = false
      this.$nextTick(() => {
        this.editedItem = Object.assign({}, this.defaultItem)
        this.editedIndex = -1
      })
    },

    closeDelete () {
      this.dialogDelete = false
      this.$nextTick(() => {
        this.editedItem = Object.assign({}, this.defaultItem)
        this.editedIndex = -1
      })
    },

    save () {
      if (this.editedIndex > -1) {
        Object.assign(this.desserts[this.editedIndex], this.editedItem)
      } else {
        this.desserts.push(this.editedItem)
      }
      this.close()
    },
  },
})

When i add new item in the modal dialog a new uuid is created for the added row. However if you add more than 2 new items then the uuid is duplicated.

Is there something wrong with the inbuilt data table index here?

When start the page, uuid is assigned to "editedItem" and "defaultItem" and is not calling again.

    save () {
      if (this.editedIndex > -1) {
        Object.assign(this.desserts[this.editedIndex], this.editedItem)
      } else {
        this.desserts.push(this.editedItem)
        this.defaultItem.id = uuid.v4();
      }
      this.close()
    },

If modified as above, the uuid of the next item will be newly set when the new item is saved.

And there is one other problem with the code.

When a pop-up is closed without saving by calling "NEW ITEM" for the first time, the uuid of "editedItem" in the close() function is overwritten as uuid of "defaultItem".

Set the uuid of "defaultItem" and "editedItem" to the same value.