title: Vuetify datatable reload when performing CRUD operations
body: <p>I have a simple vuetify datatable that performs CRUD operations. I am using axios and a mongo database. When I add a new item, the information is correctly displayed in the client side and posted in the mongo database. However, <strong>I cannot access to updated information of the mongo database, particularly the id that mongo created</strong>, unless I reload the webpage. I am newcomer in Vue, please be patient. A simplified version of the problem:</p>
  
  <pre><code> axios
     .post('http://localhost:5000/dessert', {
     name: this.editedItem.name
   })
  
   console.log(this.editedItem.name) // I CAN ACCES WITHOUT PROBLEM
   console.log(this.editedItem._id) // I NEED TO RELOAD THE WEBPAGE IN ORDER TO ACCES THIS ELEMENT. THE ID THAT MONGO CREATED.
  </code></pre>
  
  <p><strong>Vue file</strong>:</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-data-table
      :headers="headers"
      :items="desserts"
      sort-by="calories"
      class="elevation-1"
    &gt;
      &lt;template v-slot:top&gt;
        &lt;v-toolbar flat color="white"&gt;
          &lt;v-toolbar-title&gt;My CRUD&lt;/v-toolbar-title&gt;
          &lt;v-divider
            class="mx-4"
            inset
            vertical
          &gt;&lt;/v-divider&gt;
          &lt;v-spacer&gt;&lt;/v-spacer&gt;
          &lt;v-dialog v-model="dialog" max-width="500px"&gt;
            &lt;template v-slot:activator="{ on }"&gt;
              &lt;v-btn color="primary" dark class="mb-2" v-on="on"&gt;New Item&lt;/v-btn&gt;
            &lt;/template&gt;
            &lt;v-card&gt;
              &lt;v-card-title&gt;
                &lt;span class="headline"&gt;{{ formTitle }}&lt;/span&gt;
              &lt;/v-card-title&gt;
  
              &lt;v-card-text&gt;
                &lt;v-container&gt;
                  &lt;v-row&gt;
                    &lt;v-col cols="12" sm="6" md="4"&gt;
                      &lt;v-text-field v-model="editedItem.name" label="Dessert name"&gt;&lt;/v-text-field&gt;
                    &lt;/v-col&gt;
                    &lt;v-col cols="12" sm="6" md="4"&gt;
                      &lt;v-text-field v-model="editedItem.calories" label="Calories"&gt;&lt;/v-text-field&gt;
                    &lt;/v-col&gt;
                  &lt;/v-row&gt;
                &lt;/v-container&gt;
              &lt;/v-card-text&gt;
  
              &lt;v-card-actions&gt;
                &lt;v-spacer&gt;&lt;/v-spacer&gt;
                &lt;v-btn color="blue darken-1" text @click="close"&gt;Cancel&lt;/v-btn&gt;
                &lt;v-btn color="blue darken-1" text @click="save"&gt;Save&lt;/v-btn&gt;
              &lt;/v-card-actions&gt;
  
            &lt;/v-card&gt;
          &lt;/v-dialog&gt;
        &lt;/v-toolbar&gt;
      &lt;/template&gt;
  
      &lt;template v-slot:item.action="{ item }"&gt;
        &lt;v-icon
          small
          class="mr-2"
          @click="editItem(item)"
        &gt;
          edit
        &lt;/v-icon&gt;
        &lt;v-icon
          small
          @click="deleteItem(item)"
        &gt;
          delete
        &lt;/v-icon&gt;
      &lt;/template&gt;
  
      &lt;template v-slot:no-data&gt;
        &lt;v-btn color="primary" @click="initialize"&gt;Reset&lt;/v-btn&gt;
      &lt;/template&gt;
    &lt;/v-data-table&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import axios from 'axios'
  
    export default {
      data: () =&gt; ({
        dialog: false,
        headers: [
          {
            text: 'Dessert (100g serving)',
            value: 'name',
          },
          { text: 'Calories', value: 'calories' },
          { text: 'Actions', value: 'action', sortable: false },
        ],
        desserts: [],
        editedIndex: -1,
        editedItem: {
          name: '',
          calories: 0,
        },
        defaultItem: {
          name: '',
          calories: 0,
        },
      }),
      mounted() {
         this.fetchItems()
      },
  
      computed: {
        formTitle () {
          return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
        },
      },
      watch: {
        dialog (val) {
          val || this.close()
        },
      },
      created () {
        this.initialize()
      },
  
      methods: {
        fetchItems(){
        axios
          .get('http://localhost:5000/dessert')
          .then(response =&gt; (this.desserts = response.data.data))
          },
  
        editItem (item) {
          this.editedIndex = this.desserts.indexOf(item)
          this.editedItem = Object.assign({}, item)
          this.editedID = this.editedItem._id
          this.name = this.editedItem.name
          this.calories = this.editedItem.calories
          this.dialog = true
        },
  
        deleteItem (item) {
          const index = this.desserts.indexOf(item)
          this.deletedItem = Object.assign({}, item)
          console.log(this.deletedItem)
          this.deletedID = this.deletedItem._id
          console.log(this.deletedID)
          if (confirm("Do you really want to delete?")) {
            axios.delete(`http://localhost:5000/dessert/${this.deletedID}`);
            this.desserts.splice(index, 1);
          }
        },
  
        close () {
          this.dialog = false
          setTimeout(() =&gt; {
            this.editedItem = Object.assign({}, this.defaultItem)
            this.editedIndex = -1
          }, 300)
        },
        save () { // Edit Item
          if (this.editedIndex &gt; -1) {
            Object.assign(this.desserts[this.editedIndex], this.editedItem)
            axios.delete(`http://localhost:5000/dessert/${this.editedItem._id}`)
            axios
              .post('http://localhost:5000/dessert', {
              name: this.editedItem.name,
              calories: this.editedItem.calories
              })
  
            // New Item
          } else {
            this.desserts.push(this.editedItem)
  
            axios.post('http://localhost:5000/dessert', {
            name: this.editedItem.name,
            calories: this.editedItem.calories
            })
          }
  
          this.close()
        },
      },
    }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Python file</strong>:</p>
  
  <pre><code>from flask import Flask
  from flask import jsonify
  from flask import request
  from flask_pymongo import PyMongo
  from flask_cors import CORS
  from bson.objectid import ObjectId
  
  app = Flask(__name__)
  #CORS(app)
  
  # instantiate 
  app.config.from_object(__name__)
  
  # enable CORS
  CORS(app, resources={r'/*': {'origins': '*'}})
  
  app.config['MONGO_DBNAME'] = 'restdb'
  app.config['MONGO_URI'] = 'mongodb://localhost:27017/restdb'
  
  mongo = PyMongo(app)
  
  @app.route('/dessert', methods=['POST'])
  def add_dessert():
    dessert = mongo.db.desserts
    name = request.json['name']
    calories = request.json['calories']
    dessert_id = dessert.insert({
      'name': name, 
      'calories': calories
  })
    new_dessert = dessert.find_one({'_id': dessert_id })
    output = {
      'name' : new_dessert['name'], 
      'calories' : new_dessert['calories']
  }
    return jsonify({'result' : output})
  
  @app.route('/dessert', methods=['GET'])
  def get_all_desserts():
    dessert = mongo.db.desserts
    output = []
    for s in dessert.find():
      s['_id'] = str(s['_id'])
      output.append({'_id' : s['_id'], 
                     'name' : s['name'], 
                     'calories' : s['calories']
      })
    return jsonify({'data' : output})
  
  @app.route('/dessert/&lt;dessert_id&gt;', methods=['GET'])
  def get_one_dessert(dessert_id):
    dessert = mongo.db.desserts
    s = dessert.find_one({"_id" : ObjectId(dessert_id)})
    s['_id'] = str(s['_id']) 
    if s:
      output = {'_id' : s['_id'], 'name' : s['name'], 'calories' : s['calories']}
    else:
      output = "No such name"
    return jsonify({'result' : output})
  
  @app.route('/dessert/&lt;dessert_id&gt;', methods=['DELETE'])
  def delete_one_dessert(dessert_id):
    dessert = mongo.db.desserts
    s = dessert.find_one({"_id" : ObjectId(dessert_id)})
    s['_id'] = str(s['_id'])
    dessert.remove({"_id" : ObjectId(dessert_id)}) 
    if s:
      output = {'_id' : s['_id'], 'name' : s['name'], 'calories' : s['calories']}
    else:
      output = "No such name"
    return jsonify({'result' : output})
  
  if __name__ == '__main__':
      app.run(debug=True)
  </code></pre>