Vue JS 如何调整鼠标悬停组件在移动端的展示位置

• 桌面端正常表现
  • 页面共4张图片，鼠标悬停任意图片时，会展示与该图绑定的对应组件，交互逻辑与位置效果均符合预期
• 移动端异常表现
  • 当屏幕宽度适配至568px的移动端断点时，出现定位错位问题
  • 本该与图片一一对应的悬停组件，全部脱离所属图片位置，统一堆叠在页面底部
• 可参考的对照与调试素材
  • 三类效果参考截图：桌面端正常展示效果、移动端错位异常效果、移动端目标展示效果
  • 全量调试参考代码：可运行的参考代码、App.vue完整实现代码、4个分别绑定不同图片的悬停子组件（EnjoyBlue、EnjoyGreen、EnjoyYellow、EnjoyRed）的实现代码
• 预期实现目标
  • 移动端场景下，触发某张图片的悬停交互时，对应的关联组件需展示在该图片的正下方，完全匹配设计要求

内容的提问来源于stack exchange，提问作者Synchro