title: bootstrap-vue editable table revert value if error
body: <p>I am using the vue js and bootstrap-vue to make an editable table, the user is allowed to make changes on the table with v-on:change assisting to axios update the database. The restriction is that the Languages are Unique and cannot be an empty string, I cannot seem to be able to revert the value if the user makes a mistake. What is the recommended approach to this? Any help is greatly appreciated.</p>
  
  <p>I have tried to "refresh" the table by doing:</p>
  
  <pre><code>this.languages = this.languages;
  </code></pre>
  
  <p>Does not seem to refresh the value in the table.</p>
  
  <p>a section of vue component on the table:</p>
  
  <pre><code>&lt;b-table striped hover :items="filtered" :fields="fields"&gt;
      &lt;template slot="name" slot-scope="data"&gt;
          &lt;b-form-input type="text" :value="data.item.name" v-on:change="updateLanguage($event,data.item.id)"&gt;&lt;/b-form-input&gt;
      &lt;/template&gt;
  &lt;/b-table&gt;
  </code></pre>
  
  <p>in the methods of vue export default:</p>
  
  <pre><code>updateLanguage(e,id) {
      if(e.trim()){
          const find_langauge = this.languages.find(language=&gt;{
              return language.name.toLowerCase() === e.toLowerCase();
          });
      find_langauge ? this.languages = this.languages : console.log('no match');
      } else {
          console.log('cannot be empty');
          this.languages = this.languages;
      }
  }
  </code></pre>
  
  <p>in computed:</p>
  
  <pre><code>filtered() {
      return this.search ? this.languages.filter(language=&gt;
          language.name.toLowerCase().includes(this.search.toLowerCase())) : this.languages;
  }
  </code></pre>