title: On hover change multiple elements icon in vue framework
body: <p>I have four elements, On hover I want to change the icon of the hovered element, I know I can do it with JS/jQuery but I'm new to vue and want to do it in Vue. Now It changed the all four elements icon with this code: </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="col-md-3"&gt;
  &lt;div class="welcome-latest"&gt;
      &lt;div class="hover-icon animated" v-bind:class="{ latestActive : isActive }"&gt;
          &lt;i class="fa fa-play" aria-hidden="true"&gt;&lt;/i&gt;
      &lt;/div&gt;
      &lt;div class="welcome-latest-part"
              v-on:mouseover="latestActive"
              v-on:mouseleave="latestInActive"&gt;
          &lt;a href="#"&gt;
              &lt;div class="latest-icon"&gt;
                  &lt;i class="fa fa-play-circle-o" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;/div&gt;
              &lt;hr&gt;
              &lt;div class="latest-title"&gt;
                  &lt;h2&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit&lt;/h2&gt;
              &lt;/div&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Vue:</p>
  
  <pre><code>new Vue({
      el: '#app',
  
      data : {
          isActive : true
      },
  
      methods : {
          latestActive (part) {
              this.isActive = false;
          },
          latestInActive(part) {
              this.isActive = true;
          }
      }
  });
  </code></pre>
  
  <p>but I want to change only the hovered element! How I will do that? 
  Thank in advanced.</p>
  
  <p>This is my <a href="https://jsfiddle.net/mbmohib/py894zj8/2/" rel="nofollow noreferrer">fiddle</a>!</p>
  
  <p><a href="https://jsfiddle.net/mbmohib/py894zj8/2/" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OtbzX.png" alt="enter image description here"></a></p>