title: Vue - perform an action on just the newly added element in a v-for array
body: <p>I have a v-for array that holds a bunch of elements. After the user performing certain actions, I insert another element at the front of the array.</p>
  <p>I want the element to initially have a height of 0, and to slowly expand to a height of 150px. The other elements should remain 150px like they were before.</p>
  <p>My failed attempt was to try to assign a class with height 0 to the the newly inserted element:</p>
  <pre><code>    &lt;div id=&quot;brickHolder&quot;&gt;
        &lt;svg
          v-for=&quot;brick in bricks&quot; :id=&quot;brick.id&quot;
          class=&quot;expandable&quot; :class=&quot;{not_expanded: keepShut(brick.id)}&quot;
        &lt;/svg&gt;
      &lt;/div&gt;
  </code></pre>
  <pre><code>    keepShut(id) {
        return id === this.bricks[0].id
      },
  </code></pre>
  <p>And to then remove it, triggering the expansion animation:</p>
  <pre><code>        let parent = document.getElementById(&quot;brickHolder&quot;);
          parent.children[0].classList.remove('not_expanded');
  </code></pre>
  <p>But that doesn't work. What's a better way?</p>