title: How to reset CSS animations in Vue
body: <p>I have a list like this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var v = new Vue({
    'el' : '#app',
    'data' : {
      'list' : [1,2,3,4,5,6,7,8,9,10]
    },
    
    methods: {
      activateClass($event){
        $event.target.classList.remove('animate');
        void $event.target.offsetWidth;
        $event.target.classList.add('animate');
      },
      changeRandomValue(){
        var randomAmount = Math.round(Math.random() * 12);
        var randomIndex = Math.floor(Math.random() * this.list.length);
        Vue.set(this.list, randomIndex, randomAmount)
      }
    },
    
    mounted(){
      var vm = this;
      setInterval(function(){
        vm.changeRandomValue();
      }, 500);
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.animate{
    animation: fade 0.5s;
  }
  
  @keyframes fade{
    0% { background:blue; }
    100% { background:white; }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt;
    &lt;ul&gt;
      &lt;li v-for="item in list" v-html="item" @click="activateClass($event)"&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>If you run the above snippet, you'll see that if you click an li it will use this code:</p>
  <pre><code>activateClass($event){
    $event.target.classList.remove('animate');
    void $event.target.offsetWidth;
    $event.target.classList.add('animate');
  }
  </code></pre>
  <p>To add a class to it once and play an animation (<a href="https://css-tricks.com/restart-css-animation/" rel="nofollow noreferrer">https://css-tricks.com/restart-css-animation/</a>). Awesome!</p>
  <p>Now, I also have a <code>changeRandomValue()</code> function that selects one element from the list array and change its value.</p>
  <h3>How would I use the <code>activateClass</code> method from inside of the <code>changeRandomValue</code> method?</h3>
  <p>I've had a few thoughts about using events on the element, so it would be something like:</p>
  <pre><code>&lt;li v-for=&quot;item in list&quot; v-html=&quot;item&quot;
      @click=&quot;activateClass($event)&quot;
      @myValueChanged=&quot;activateClass($event)&quot;
  &gt;&lt;/li&gt;
  </code></pre>
  <p>But I don't think anything like that exists. I have also been looking into watchers but I don't think this is really what they are for.</p>
  <p>I have no problem taking the element that has been clicked and finding the data that it is referencing, but I can't work out how to take the data that has been changed and then find its dom reference.</p>
  <p>The reason I'm not using class bindings is that I need to trigger a reflow. Maybe there is a really easy way to do that with vue, but I'm not aware of it.</p>