title: Row is getting duplicated in Vue
body: <p>My column is duplicating and I don't understand why. It doesn't happen to the columns that don't have the class applied to them.</p>
  <p>What can I do?</p>
  <pre><code>&lt;tr v-for=&quot;(item, key) in array.filter(el =&gt; el.Id !== null)&quot;&gt;
    &lt;td&gt;@{{ key + 1 }}.&lt;/td&gt;
    &lt;td&gt;
      &lt;div 
        v-for=&quot;subitem in array.filter(el =&gt; el.Id === item.Id)&quot; 
        v-bind:class=&quot;array.filter(el =&gt; el.Id === item.Id).length &gt; 1 ? 'children-row' : ''&quot;
      &gt;
        @{{ subitem.NAME }}
        &lt;span&quot;&gt;
          &lt;i&gt; edit &lt;/i&gt;
        &lt;/span&gt;
      &lt;/div&gt;
    &lt;/td&gt;
    &lt;td&gt;
      @{{ item.NAME2 }}
    &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  <p>This is the array</p>
  <pre><code>Name: &quot;John&quot;, Id: 10, NAME2: &quot;Joey&quot;, IdParent: 16 
  Name: &quot;Mike&quot;, Id: 11, NAME2: &quot;Mark&quot;, IdParent: 19 
  Name: &quot;Andrew&quot;, Id: 13, NAME2: &quot;Mark&quot;, IdParent: 19 
  </code></pre>
  <p>And this is the <em>.children-row</em> class style</p>
  <pre><code>.children-row {
       padding-top: 6px;
  }
  .children-row:nth-child(odd) {
       padding-top: 0px;
       padding-bottom: 6px;
       border-bottom: 1px solid #e5e5e5;
  }
  </code></pre>
  <p><strong>What i'm looking for is to have the objects which have the same Id, be grouped into the same table cell.</strong></p>
  <p>This is what i currently have, the problem is that the second row, shows up twice</p>
  <p><a href="https://i.stack.imgur.com/aLR7u.png" rel="nofollow noreferrer">Photo</a></p>