Proste menu parent/child w Vue 3 Opcje

[phpamator]

Hej hej Panie i Panowie,

Potrzebuję pomocy bo utknąłem albo raczej nie wiem czy droga którą obrałem aby na pewno przyniesie rezultat jakiego oczekuję, mianowicie sporządziłem (nigdy wczesniej) proste menu i nawet mam udało się uzyskać zamierzony efekt chociaż nie do końca.
Dostarczam dane json'em w którym znajdują się tytuły, linki, id nadrzędnego poziomu menu i wygenerowany kod owszem pokazuje listę w której te które powinny być sub-menu ... są.
teraz .... nie potrafię tego dalej powiązać aby onhover/onmouseover pokazywały się te elementy które są dziećmi (.sub-menu).
a może ten koncept jest całkowicie pozbawiony sensu ?

[HTML] pobierz, plaintext 
          <ul
            class="list-none ml-0 pl-0 relative font-avenir text-white text-xl uppercase leading-relaxed"
          >
            <li v-for="(link, key) in menu" :key="key" class="mb-2">
				<template v-if="link.menu_item_parent != '0'">
				  <a
					:href="link.url"
					class="text-white tracking-widest sub-menu"
					@mouseenter="hoverLink(link.image, 'enter')"
					@mouseleave="hoverLink(link.image, 'leave')"
				  >	{{ link.name }}  </a>
				</template>
				<template v-else>
				  <a 
					:href="link.url"
					class="text-white tracking-widest"
					@mouseenter="hoverLink(link.image, 'enter')"
					@mouseleave="hoverLink(link.image, 'leave')"
				  >	{{ link.name }}  </a>
				</template>
 
            </li>
          </ul>
 
 
<script>
export default {
  props: ["menu"],
  data() {
    return {
      show: false,
      linkImage: 'default',
 
    };
  },
  methods: {
    toggle() {
      this.show = !this.show;
    },
    hoverLink(image, state) {
      this.linkImage = state === "enter" ? image : 'default';
    }
  },
  computed: {
 
  },
  mounted() {}
};
</script>
 
[HTML] pobierz, plaintext 

Podpowiedzcie, jak to powinno wyglądać?