title: Vue.js update array, not reloading all data
body: <p>I'm new to Vue.js and JavaScript. I just want to know how to update array (on Add/Edit/Delete) and not reloading again all the data. Only loading all data when opening page with Addresses.</p>
  
  <p>This is my code:</p>
  
  <pre><code>&lt;template v-else&gt;
  &lt;div&gt;
      &lt;div class="page-header with-actions"&gt;
          &lt;h1&gt;Addresses&lt;/h1&gt;
          &lt;div class="actions"&gt;
              &lt;b-btn @click="addAddress" variant="primary"&gt;&lt;i class="oi oi-plus"&gt;&lt;/i&gt; Add Address&lt;/b-btn&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div v-if="isLoaded === true"&gt;
          &lt;div v-if="addressList.length"&gt;
              &lt;b-form @submit.prevent="submit"&gt;
                  &lt;validation-summary :errors="errors"&gt;&lt;/validation-summary&gt;
  
                  &lt;div class="row"&gt;
                      &lt;div class="col-sm-4" v-for="address in addressList"&gt;
                          &lt;div class="card bg-light mb-4"&gt;
                              &lt;div class="card-header"&gt;
                                  {{address.countryName}}
                                  &lt;div class="float-right"&gt;
                                      &lt;b-btn @click="editAddress(address.id)" class="btn btn-default btn-sm" data-toggle="tooltip" title="Edit address"&gt;
                                          &lt;i class="fa fa-edit" aria-hidden="true"&gt;&lt;/i&gt;
                                      &lt;/b-btn&gt;
                                      &lt;b-btn @click="deleteAddress(address.id)" class="btn btn-default btn-sm" data-toggle="tooltip" title="Delete address"&gt;
                                          &lt;i class="fa fa-trash" aria-hidden="true"&gt;&lt;/i&gt;
                                      &lt;/b-btn&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="card-body"&gt;
                                  &lt;em class="card-text"&gt;{{address.city}},&lt;/em&gt;&lt;br /&gt;
                                  &lt;em class="card-text"&gt;{{address.streetAddress}},&lt;/em&gt;&lt;br /&gt;
                                  &lt;em class="card-text"&gt;{{address.zip}}&lt;/em&gt;&lt;br /&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/b-form&gt;
          &lt;/div&gt;
          &lt;div v-else class="alert alert-info" role="alert"&gt;
              There are no &lt;strong&gt;addresses&lt;/strong&gt; yet!
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;add-address-modal ref="addAddressModal" @success="addressAdded"&gt;&lt;/add-address-modal&gt;
      &lt;edit-address-modal ref="editAddressModal" @success="addressEdited&gt;&lt;/edit-address-modal&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Vue from 'vue';
  import modalFormMixin from 'mixins/modal-form-mixin';
  import formMixin from 'mixins/form-mixin';
  import accountService from 'services/account-service';
  
  import AddAddressModal from './add-address-modal';
  import EditAddressModal from './edit-address-modal';
  
  export default {
      mixins: [modalFormMixin],
      mixins: [formMixin],
  
      components: {
          'add-address-modal': AddAddressModal,
          'edit-address-modal': EditAddressModal
      },
  
      data() {
          return {
              addressList: [],
              isLoaded: false,
          }
      },
  
      async beforeRouteEnter(to, from, next) {
          next(async (c) =&gt; await c.initData());
      },
  
      methods: {
          async initData() {
              await this.loadAddressList(); //when opening page
  
              this.isLoaded = true;
          },
  
          async loadAddressList() {
              this.addressList = await accountService.getAddressList();
          },
  
          addAddress(data) {
              this.$refs.addAddressModal.show();
          },
  
          editAddress(id) {
              this.$refs.editAddressModal.show(id);
          },
  
          async deleteAddress(id) {
              await accountService.deleteAddress(id);
  
              this.loadAddressList(); //need to change
  
              this.$root.successToast('Address deleted');
          },
  
          addressAdded() {
              this.loadAddressList(); //need to change
  
              this.$root.successToast('Address added');
          },
  
          addressEdited() {
              this.loadAddressList(); //need to change
  
              this.$root.successToast('Address edited');
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>So i need to change loadAddressList() because its reloading again all the addresses data after Add/Edit/Detele. What will be the best solution for this?</p>