Vue + Vuetify + Axios + Django : CRUD data table

Solution for Vue + Vuetify + Axios + Django : CRUD data table
is Given Below:

I am trying to build a Vuetify CRUD using AXIOS. I am able to do CRUD operations, but am not able to display the newly added data till the page is refreshed. When I select edit, I am not able to see the existing data while editing. The editable dialog box shows empty.
Please help me if to resolve this.

Here is my script

import Navbar from '../components/Navbar.vue'
import { getAPI } from '../axios-api'
// import DataService from "../services/DataService";
  export default {
    data: () => ({
      dialog: false,
      dialogDelete: false,
      headers: [
        { text: 'ID', align: 'start', value: 'id',},
        { text: 'Length', value: 'size' },
        { text: 'Weight', value: 'weight' },
        { text: 'Actions', value: 'actions', sortable: false },
      ],
      info: [],
      editedIndex: -1,
      editedItem: {
        ID: '',
        Weight: 0,
        Length: 0,
      },
      defaultItem: {
        name: '',
        Weight: 0,
        Length: 0,
      },
    }),
    components:{
            Navbar
        },

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

    methods: {
      initialize () {
        getAPI.get('calibration/sizeweight')
        .then(response => {
        this.info = response.data
      })
      },

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

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

      deleteItemConfirm () {
        this.info.splice(this.editedIndex, 1)
        this.closeDelete()
        getAPI.delete('calibration/sizeweight/'+this.editedItem.id)
        .then(response=>{
        console.log(response)
        })
      },

      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.info[this.editedIndex], this.editedItem)
          getAPI.put('calibration/sizeweight/'+this.editedItem.ID,{id:this.editedItem.ID ,weight:this.editedItem.Weight,size:this.editedItem.Length})
          .then(response=>{
            console.log(response)
            this.initialize()
          })
        } else {
          this.info.push(this.editedItem)
          getAPI.post('calibration/sizeweight',{id:this.editedItem.ID ,weight:this.editedItem.Weight,size:this.editedItem.Length})
          .then(response=>{
            console.log(response)
            this.initialize()
          })
          .catch(error => { console.log(error.response.data)})
        }
        this.close()
      },
    },

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

    created () {
      this.initialize()
    },


  }
</script>