title: Hover nested vue component
body: <p>I have a nested &amp; re-used vue component. I am trying to use v-show to display part of the component (icons) when its outer parent is hovered. To achieve this I am passing the parent and child index as props but my parent element is returning true for v-show when the child element is hovered. What can I do to remedy this?</p>
  
  <pre><code>&lt;div v-for="course, index in courses"&gt;
  
    &lt;!-- hover me --&gt;
    &lt;div class="header" @mouseover="setShowIndex(index)" @mouseout="resetShowIndex"&gt;
  
    &lt;!-- part of this component should v-show when its parent is hovered --&gt;
    &lt;MyCustomComponent
       type="course"
       :showCourseIndex="showCourseIndex"
    /&gt;
  
    &lt;!-- items.lessons can be hovered too, but the parent should not v-show when this is hovered --&gt;
    &lt;div 
      v-for="lesson, i in course.lessons"
      @mouseover="setShowIndex(index, i)" 
      @mouseout="resetShowIndex"
    &gt;
      &lt;MyCustomComponent
         type="lesson"
         :showCourseIndex="showCourseIndex"
         :showLessonIndex="showLessonIndex"
      /&gt;
    &lt;/div&gt;
  &lt;/div
  
  
  /** 
   * update indexes to pass as props
   */
  setShowIndex(index, i) {
    if (i !== undefined) {
        this.showLessonIndex = i;
    }
    this.showCourseIndex = index;
  },
  
  resetShowIndex() {
    this.showCourseIndex = null;
    this.showLessonIndex = null;
  }
  
  </code></pre>
  
  <pre><code>// MyCustomComponent
  
  &lt;div&gt;
    &lt;!-- ... more --&gt;
    &lt;div v-show="shouldShowIndex"&gt;
      &lt;p&gt;Show me&lt;/p&gt;
    &lt;/div&gt;
    &lt;!-- ... more --&gt;
  &lt;/div&gt;
  
  
  computed: {
  
      shouldShowIndex() {
  
        if ( this.type == 'lesson'
          &amp;&amp; this.showModuleIndex == this.moduleIndex 
          &amp;&amp; this.showLessonIndex == this.lessonIndex ) {
  
          return true;
  
        } else if (this.type == 'course' &amp;&amp; this.showModuleIndex == this.moduleIndex ) {
  
          return true; // problem here, this is returning True when a lesson is hovered
  
        }
  
        return false;
      },
  
  }
  
  </code></pre>