Vue-table-2 table will not updated

Question

I am new to vue and i do make use of vue-tables-2 to view my database data using the created() lifecycle, right on the same page, i also have a form that always send data to this this table database, but anytime i add new file to the database i need to referesh the page before the new inserted data comes up.

I have tried passing a ref to the table, but it won't work either, i also use this.$parent.refresh but it won't work either. here is the code

//Vue-table package

<v-client-table ref="table"
                  :data="packageData"
                  :columns="packageColumns"
                  :options="packageOptions"
                   >
                   <div slot="Action" slot-scope="{row}">

                    <b-button variant="outline-success" class="mr-2" v-b-modal.modal1 @click="editShip(row.id)">Edit Package</b-button>

                    </div>
        </v-client-table>

methods

            packageColumns:['description', 'quantity', 'weight', 'length', 'height', 'width', 'dimension', 'category' ,'Action'],
            packageOptions:{
                headings: {
                    description: 'Description',
                    quantity: 'Quantity',
                    weight: 'Weight',
                    length: 'Length',
                    height: 'Height',
                    width: 'Width',
                    dimension: 'Dimension',
                    category: 'Category'
                },
                sortable: ['description', 'quantity', 'weight', 'length', 'height', 'width', 'dimension', 'category' ],
                filterable: ['description', 'quantity', 'weight', 'length', 'height', 'width', 'dimension', 'category' ]
            },

async created(){
                        var unitnum = await sessionStorage.getItem('unitNo')
                        this.userDetail = details.data

                        ///here is were i the database request
                        const response = await Authentication.userPackage({
                            unitNo: unitnum
                        })
                        this.warehouseNo = response.data.warehouseNo
                        if(response.data.packages.air.length  > 0 ){
                            this.packageData = response.data.packages.air
                        else{
                            this.packageData = []
                        }
                    },

methods: {
       async addPackage(){
            try{
                var user = sessionStorage.getItem('user')
                var unitnum = sessionStorage.getItem('unitNo')
                const response = await Authentication.addShipment({
                   user: user,
                   unitno: unitnum,
                   category: this.category,
                   height: this.height,
                   itemweight: this.weight,
                   width: this.width,
                   length: this.length,
                   quantity: this.quantity,
                   description: this.itemDescription,
                   category: this.category,
                   reference: this.reference,
                   merchant: this.merchant,
                   note: this.note
                })
                const self = this
                self.display = true
                self.serverMsg = 'package has been added successfully';
//here is where i instruct my table to update on new data successful
                if(self.display = true)this.$parent.refresh()
                }catch(err){
                    if(err.response){
                            this.error = []           
                            if(err.response.status === 400) this.errors.push(err.response.data.message);
                            if(err.response.status === 404) this.errors.push(err.response.data.message);

               }
            }
       },