title: How to delete elements from data filtered - Vue.js 2.x
body: <p>Inside the new Vue({}), I use the following code to create two list of students by votes.
  How to avoid remove() method duplication to delete one student.</p>
  
  <p>List with number of votes:</p>
  
  <pre><code>data: {
      students: 
      [{
          'name': 'Jose',
          'last_name': 'Aris',
          'document': '201700154',
          'campus': 1,
          'votes': 0,
      },
  
      {
          'name': 'Manuel',
          'last_name': 'Hernadez',
          'document': '201700195',
          'campus': 2,
          'votes': 3,
      },],
  },
  </code></pre>
  
  <p>Filters:</p>
  
  <pre><code>computed: 
  {
      voted: function ()
      {
          return this.students.filter((student) =&gt; {
              return student.votes &gt;= 1;
          });
      },
  
      unvoted: function ()
      {
          return this.students.filter((student) =&gt; {
              return student.votes &lt;= 0;
          });
      },
  },
  </code></pre>
  
  <p>The problem occurs when two filters have the same index elements:</p>
  
  <pre><code>methods: 
  {
      remove (student, index)
      {
          if (!confirm(`Are you sure want to delete ${student.name} ${student.last_name}?`))
          {
              return;
          }
  
          this.students.splice(index, 1);
      },
  }
  </code></pre>
  
  <p>Finally, HTML list:</p>
  
  <pre><code>    &lt;div class="col-md-12"&gt;
          &lt;h4&gt;LIST VOTED&lt;/h4&gt;
          &lt;ul class="list-group"&gt;
              &lt;li v-for="(student, index) in voted" class="list-group-item"&gt;
                  {{index}} {{student.name}} {{student.last_name}} / {{student.document}} &lt;vote :student="student" class="pull-right"&gt;&lt;/vote&gt;
                  &lt;a href="" class="btn btn-danger" @click.prevent="remove(student, index)"&gt;
                      &lt;span class="glyphicon glyphicon-trash" aria-hidden="true"&gt;&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div class="col-md-12"&gt;
          &lt;h4&gt;LIST UNVOTED&lt;/h4&gt;
          &lt;ul class="list-group"&gt;
              &lt;li v-for="(student, index) in unvoted" class="list-group-item"&gt;
                  {{index}} {{student.name}} {{student.last_name}} / {{student.document}} &lt;vote :student="student" class="pull-right"&gt;&lt;/vote&gt;
                  &lt;a href="" class="btn btn-danger" @click.prevent="remove(student, index)"&gt;
                      &lt;span class="glyphicon glyphicon-trash" aria-hidden="true"&gt;&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Thank you for reading</p>