Refresh doesn't seems to work for my BootstrapVue <b-table> component

Question

Despite I'am using refresh method, my doesn't get updated after I change some element of its items[] records:

I have to add a dummy/ghost record and then delete it to get the record I want updated:

        this.items[this.posItemEdited] = element;
        //this.$refs['theTable'].refresh(); //Doesn't work
        //this.$root.$emit('bv::refresh::table', 'theTable'); //Doesn't work

        //TRICK: add and delete 
        this.items.push(element);
        this.items.splice(this.items.length - 1, 1);

Answer 1

Below code does not work because of caveats in a reactivity of Vue.js

this.items[this.posItemEdited] = element;

See Reactivity for arrays

To solve this problem you need to use $set:

this.$set(this.items, this.posItemEdited, element)