Parent Child Hover

HTML

<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <div class="w-full m-8 relative bg-indigo-200" @mouseover="toggleEdit('parent')" @mouseleave="toggleEdit()">
        <div class="max-w-[680px] w-full mx-auto bg-white">
            <div @mouseover.stop="toggleEdit('child')" @mouseleave.stop="toggleEdit()" class="w-full relative py-6 flex justify-center">
                <img width="160" height="60" src="https://d3ag9sk63msume.cloudfront.net/project-assets/images/noetic_logo.png" alt="Logo">
                <div v-show="mousechild" class="absolute top-0 left-0 w-full h-full border-2 border-blue-500">
                    <div class="relative w-full h-full">
                        <div class="absolute right-[-30px] flex flex-col">
                            <div class="h-7 w-7 bg-gray-900 flex items-center justify-center cursor-pointer">
                                <img src="/project-assets/images/email-template/icons/drag.png" width="20" height="20">
                            </div>
                            <div class="h-7 w-7 bg-gray-900 flex items-center justify-center cursor-pointer my-[1px]">
                                <img src="/project-assets/images/email-template/icons/delete.png" width="17" height="17">
                            </div>
                            <div class="h-7 w-7 bg-gray-900 flex items-center justify-center cursor-pointer">
                                <img src="/project-assets/images/email-template/icons/clone.png" width="17" height="17">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-show="mouseparent" class="absolute top-0 left-0 w-full h-full border-2 border-blue-500">
            <div class="relative w-full h-full">
                <div class="absolute right-[-30px] flex flex-col">
                    <div...

JavaScript

new Vue({
  el: "#app",
  data() {
    return {
      mouseparent: false,
      mousechild: false,
    }
  },
  methods: {
    toggleEdit(ele) {
      console.log(ele);
      if(ele === 'child') {
        console.log('Event fired: Child')
        this.mouseparent = false;
        this.mousechild = true;
      }
      else if(ele === 'parent') {
        console.log('Event fired: Parent')
        this.mouseparent = true;
        this.mousechild = false;
      }
      if(typeof ele === 'undefined') {
        console.log('Event Fired: all close')
        this.mouseparent = false;
        this.mousechild = false;
      }
    }
  }
})