title: Vue.js Change css style of child component on hover
body: <p>I created a "box" component that I re-use several times. Each element has a @mouseenter event that the parent listens to. My goal is to change the border-color of the child element. Because I declared the  from the parent with a loop I can't change only one of the childs properties but they all change</p>
  
  <pre><code>&lt;template&gt;
  &lt;div&gt;
    &lt;div id="container"&gt;
      &lt;div id="row" v-for="i in 11" :key="i"&gt;
        &lt;div&gt;
          &lt;box-component v-for="j in 7" :key="j" :color="getColor(i, j)" v-bind:borderColor="getBorder(i, j)" :row="i" :col="j" v-on:changeBorder="highlightBorder($event)"&gt;&lt;/box-component&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>The problem is with this part:</p>
  
  <p>v-bind:borderColor="getBorder(i, j)"</p>
  
  <p>Because i and j have changed I don't know how to only affect one child.</p>
  
  <p>I know that I could remove the loop and copy paste the same code but there must be another solution to this. I also know that this particular example could be implemented directly on the child component but I need to be able to do it from the parent.</p>