title: Vue3 + DataTables redraw the table after delete
body: <p>I have a Vue3 component that renders tables based on model data. Then I add DataTables functionality to the table to be able to filter and sorting data. Everything works fine. But if I click on the delete button I need to send a delete ajax request to the server and then on success redraw the whole table with new data. I tried to use draw() method but it does not work. Deleted rows are still in the table. I don't know if I need to remove the whole table and create it again or there is another solution.
  This is the Vue template code.</p>
  <pre><code>&lt;template&gt;
      &lt;div class=&quot;table-responsive&quot;&gt;
          &lt;table :id=&quot;id&quot; class=&quot;table table-bordered nowrap&quot; width=&quot;100%;&quot;&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;id&lt;/th&gt;
                      &lt;th&gt;Title&lt;/th&gt;
                      &lt;th&gt;Visible&lt;/th&gt;
                      &lt;th&gt;User&lt;/th&gt;
                      &lt;th&gt;&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr v-for=&quot;article in articles&quot; :key=&quot;article.id&quot;&gt;
                      &lt;td&gt;{{article.id}}&lt;/td&gt;
                      &lt;td&gt;{{article.title}}&lt;/td&gt;
                      &lt;td&gt;{{article.visible}}&lt;/td&gt;
                      &lt;td&gt;{{article.user.name}}&lt;/td&gt;
                      &lt;td&gt;
                          &lt;a href=&quot;#&quot; @click.prevent=&quot;deleteArticle(article.id)&quot; class=&quot;text-danger&quot;&gt;delete&lt;/a&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>And this is the deleteArticle() code</p>
  <pre><code>deleteArticle(id) {
      axios.get( apiRoutes.ARTICLE_DELETE_URL + id )
          .then( response =&gt; {
              this.getArticles();
          })
          .catch( response =&gt; {
              console.log(response);
          }); 
  },
  
  getArticles() 
  {
      axios.get( apiRoutes.ARTICLES_URL )            
          .then((response) =&gt; {
              this.articles = response.data.articles;
  
              this.$nextTick(function() {
                  this.setDataTable();
              });
          })
          .catch((response) =&gt; {
              console.log(response);
          });
  },
  
  setDataTable() {
      var table = $('#'+this.id);
  
      if( this.dataTableObject ) 
      {
          this.dataTableObject.reload().draw();  // This is the code I need to fix
          return;
      }
  
      ...
  },
  </code></pre>
  <p>What is the right flow of this component?</p>