title: buefy's b-table not updating upon clicking the delete icon or add row button?
body: <p>I am currently using the Vue js framework along with buefy (0.9.2) for the UI components. The issue here is that the b-table component is not updating sometimes when I click the delete icon(deletes that row from the table) or when I click the add new row button. I can confirm that the operations(delete and add row) themselves are working perfectly. I mean I console logged the data array and I can see that the array of objects is updated. The issue is that the front-end screen or b-table component is not immediately updating or re-rendering. This issue is however not consistent though. (sometime's it works and sometimes it doesn't).</p>
  <p><strong>NOTE: If I go back to the previous page and do a hard refresh(ctrl+f5) and then return back to the same page again then the issue is not there anymore which makes me think that this is some kind of cache-related issue where the page is not updating sometimes.</strong></p>
  <p>How can I solve this inconsistent issue?</p>
  <p>I have also tried adding a key prop like  :key=&quot;componentKey&quot; to the b-table and then incrementing the key by 1, whenever the delete or add button is clicked. But this solution is not a proper one as it comes with its own set of problems. For example, I am using pagination with my table and let say if I click the delete or add button on the 3rd page then since I am manually refreshing the table by incrementing the key the table will restore back to the 1st page.</p>
  <p>My vue page-</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;container is-fluid&quot;&gt;
      &lt;b-loading :is-full-page=&quot;true&quot; :active.sync=&quot;this.isLoading&quot;&gt;&lt;/b-loading&gt;
      &lt;p class=&quot;subtitle&quot;&gt;Bank Account Detail&lt;/p&gt;
      &lt;b-field label=&quot;ID&quot;&gt;
        &lt;b-input
          :disabled=&quot;true&quot;
          :value=&quot;this.objectData.id&quot;
          
        &gt;&lt;/b-input&gt;
      &lt;/b-field&gt;
      &lt;b-button @click=&quot;addTableRow('records', 'records')&quot; class=&quot;is-radiusless&quot;&gt;Add Bank Record&lt;/b-button&gt;
       &lt;!-- Begin Code Change:-Fixed delete row issue by refreshing table after adding key prop to the b-table-8-27-2020-vignesh --&gt; 
      &lt;b-table
        ref=&quot;records&quot;
        :data=&quot;this.objectData.records&quot;
        :hoverable=&quot;true&quot;
        :paginated=&quot;true&quot;
        :per-page=&quot;10&quot;
        selectable
        @select=&quot;selected&quot;
        detailed
        :show-detail-icon=&quot;true&quot;
        icon-pack=&quot;mdi&quot;
      &gt;  
       &lt;!-- End  Code Change:-Fixed delete row issue by refreshing table after adding key prop to the b-table-8-27-2020-vignesh --&gt;   
      
          &lt;b-table-column   v-slot=&quot;props&quot; field=&quot;effectiveDate&quot; label=&quot;Eff Date&quot;&gt;{{ props.row.effectiveDate }}&lt;/b-table-column&gt;
          &lt;b-table-column   v-slot=&quot;props&quot; field=&quot;accountType&quot; label=&quot;Account Type&quot;&gt;{{ props.row.accountType }}&lt;/b-table-column&gt;
          &lt;b-table-column   v-slot=&quot;props&quot;&gt;
            &lt;b-button class=&quot;is-borderless is-borderless&quot; @click=&quot;deleteTableRow('records','records',props.index)&quot;&gt;
              &lt;b-icon icon=&quot;delete&quot;&gt;&lt;/b-icon&gt;
            &lt;/b-button&gt;        
          &lt;/b-table-column&gt;     
      
        &lt;template slot=&quot;detail&quot; slot-scope=&quot;props&quot;&gt;
          &lt;div class=&quot;container is-fluid&quot;&gt;
            &lt;b-field label=&quot;Effective Date&quot;&gt;
              &lt;b-datepicker
                :value=&quot;props.row.effectiveDate | toDate&quot;
                @input=&quot;(newValue)=&gt;{updateRowValue('records', props.index, 'effectiveDate', newValue)}&quot;
                editable
              &gt;&lt;/b-datepicker&gt;
            &lt;/b-field&gt;
            &lt;b-field label=&quot;Account Type&quot;&gt;
              &lt;b-input
                :value=&quot;props.row.accountType&quot;
                @input=&quot;(newValue)=&gt;{updateRowValue('records', props.index, 'accountType', newValue)}&quot;
              &gt;
             &lt;/b-input&gt;
            &lt;/b-field&gt;
           
       &lt;b-field label=&quot;Country&quot;&gt;
          &lt;b-autocomplete
            :value=&quot;props.row.country&quot;
            :open-on-focus=&quot;true&quot;
            :keep-first=&quot;true&quot;
            :data=&quot;['India','United Kingdom','United States']&quot;
            @input=&quot;(newValue)=&gt;{updateRowValue('records', props.index, 'country', newValue)}&quot;
            &gt;
            &lt;template slot=&quot;empty&quot;&gt;No results found&lt;/template&gt;
          &lt;/b-autocomplete&gt;                          
        &lt;/b-field&gt;
  
  
           &lt;b-field label=&quot;Bank Name&quot;&gt;
            &lt;b-input
              :value=&quot;props.row.bankName&quot;
              @input=&quot;(newValue)=&gt;{updateRowValue('records', props.index, 'bankName', newValue)}&quot;
            &gt;&lt;/b-input&gt;
          &lt;/b-field&gt; 
  
           &lt;b-field label=&quot;Branch Name&quot;&gt;
            &lt;b-input
              :value=&quot;props.row.branchName&quot;
              @input=&quot;(newValue)=&gt;{updateRowValue('records', props.index, 'branchName', newValue)}&quot;
            &gt;&lt;/b-input&gt;
          &lt;/b-field&gt;  
  
  
          &lt;b-field label=&quot;Bank Account Number&quot;&gt;
            &lt;b-input
              :value=&quot;props.row.bankAccountNumber&quot;
              @input=&quot;(newValue)=&gt;{updateRowValue('records', props.index, 'bankAccountNumber', newValue)}&quot;
            &gt;&lt;/b-input&gt;
          &lt;/b-field&gt;
  
          &lt;b-field label=&quot;IFSC&quot;&gt;
            &lt;b-input
              :value=&quot;props.row.ifsc&quot;
              @input=&quot;(newValue)=&gt;{updateRowValue('records', props.index, 'ifsc', newValue)}&quot;
            &gt;&lt;/b-input&gt;
          &lt;/b-field&gt;                    
                                                                          
          &lt;/div&gt;
        &lt;/template&gt;
      &lt;/b-table&gt;
      &lt;section&gt;
        &lt;p class=&quot;is-size-7 has-text-danger&quot;&gt;{{submitError}}&lt;/p&gt;      
        &lt;b-button @click=&quot;submitForm&quot; class=&quot;is-radiusless&quot;&gt;Submit&lt;/b-button&gt;
        &lt;b-button type=&quot;is-text&quot; @click=&quot;$router.go(-1)&quot; class=&quot;is-radiusless&quot;&gt;Return&lt;/b-button&gt;
      &lt;/section&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { viewMixin } from &quot;../viewMixin.js&quot;;
  import debounce from &quot;lodash/debounce&quot;;
  import api from &quot;../store/api&quot;;
  const ViewName = &quot;BankAccountDetails&quot;;
  export default {
    name: &quot;BankAccountDetails&quot;,     
    mixins: [viewMixin(ViewName)],  
    data() {
      return {
        selected: null,
        isFetching: false      
      };
    },
    computed: {
      
      newRecord() {
        return this.$route.params.id === null;
      },
      filteredCountryList() {
        return this.listCountry.filter(option =&gt; {
          return option
            .toLowerCase()
            .includes(this.objectData.countryOfBirth.toLowerCase());
        });
      }
    },
    mounted() {
        var idCopy=this.$route.params.id
      /* if incoming route has an ID, query for api object */
              if (this.viewData.route_param) {
                  if (this.$route.params.id != null) {
                      var query = {
                          key: this.viewData.api_id,
                          path: this.viewData.api_path + this.$route.params.id,
                          overwriteData: false
                      };
                      
                       this.$store.dispatch(this.viewData.mounted_action, query).then(data =&gt; {
                         this.objectData.id = this.$route.params.id;
                          if (data.length == 0)   //if length of response is empty then set id to null in order to do a post on submit
                          {
                            this.$route.params.id=null;
                          }
                      }
                      ).catch((err) =&gt; {
                          console.log(err)
                        })
                    
                  }
              } else {
                  var query = {
                      key: this.viewData.api_id,
                      path: this.viewData.api_path,
                      overwriteData: false
                  };
                  this.$store.dispatch(this.viewData.mounted_action, query);
                  this.objectData.id = this.$route.params.id;
              }
              //this.$store
      this.objectData.id=idCopy
    },
    methods: {
  
   deleteTableRow(tableRef, dataCol, index) {
                  this.objectData[dataCol].splice(index, 1);   
  
              },
  
      writeLog(option) {
        console.log(JSON.stringify(option));
      },
                             
    },
    components: {}
  };
  &lt;/script&gt;
  
  </code></pre>
  <p>I am not really sure if this is an issue with buefy's b-table component or if it has sometime to do with the vue js. Please help?</p>