Javascript 悬停嵌套vue组件

我有一个嵌套的、重复使用的vue组件。我正在尝试使用v-show在其外部父对象悬停时显示组件的一部分（图标）。为了实现这一点，我将父索引和子索引作为道具传递，但是当子元素悬停时，我的父元素将返回true for v-show。我能做些什么来补救这个问题

<div v-for="course, index in courses">

  <!-- hover me -->
  <div class="header" @mouseover="setShowIndex(index)" @mouseout="resetShowIndex">

  <!-- part of this component should v-show when its parent is hovered -->
  <MyCustomComponent
     type="course"
     :showCourseIndex="showCourseIndex"
  />

  <!-- items.lessons can be hovered too, but the parent should not v-show when this is hovered -->
  <div 
    v-for="lesson, i in course.lessons"
    @mouseover="setShowIndex(index, i)" 
    @mouseout="resetShowIndex"
  >
    <MyCustomComponent
       type="lesson"
       :showCourseIndex="showCourseIndex"
       :showLessonIndex="showLessonIndex"
    />
  </div>
</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;
}

如果我正确理解了您的问题，标题应显示其图标（如果悬停），课程应显示其图标（如果悬停），但不会触发标题

setShowIndex(index, i) {
  if (i !== undefined) {
      this.showLessonIndex = i;
  } else {
      this.showCourseIndex = index;
  }
},

您是否还需要其他课程？
谢谢-问题是我们需要显示课程，以获得其父课程的正确索引，因此我们需要课程索引和课程索引。如果（this.type='course'&&this.showModuleIndex==this.moduleIndex&&this.showlesssonIndex==null）

setShowIndex(index, i) {
  if (i !== undefined) {
      this.showLessonIndex = i;
  } else {
      this.showCourseIndex = index;
  }
},