title: How to mouseover / hover for one item in a list in Vue?
body: <p>I have this vue which render a list of fruits using <code>v-for</code>. When I mouseover, the css class <code>hovering</code> applies to all items instead of just one item. How do I fix it to the css class <code>hovering</code> to apply to just the item I mouseover?</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>new Vue({
    el: '#app',
    data: {
      fruits: ['apple','kiwi', 'orange'],
      isHovering: false
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.hovering{
    color: red
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt;
    &lt;ul&gt;
      &lt;li v-for="fruit in fruits" @mouseover="isHovering = true" 
        @mouseout="isHovering = false" 
        :class="{hovering: isHovering}"&gt;
       {{ fruit }}
      &lt;/li&gt;
    &lt;/ul&gt;  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>