Andrej Sharapov

Разобрался

<ul>
        <li v-for="item in navList">
            <a :href="item.url" :class="item.cls" :title="item.name" @click="isOpen = !isOpen">{{ item.name }}
                <ul v-if="item.children" :class="{ isOpen }" class="dropdown">
                    <li v-for="{ url, name, index } in item.children" :key="index">
                        <a :href="url" :title="name">{{ name }}
                     </li>
                </ul>
             </a>
        </li>
    </ul>

Решил

<div id="navbar">
  <block-navigation></block-navigation>
  <span>World!</span>
  <other-components></other-components>
</div>

Vue.component('block-navigation', {
    props: ['val'],
    data() {
      return {
        navlist: [
          { link: 'name-1', name: 'linkName-1' },
          { link: 'name-2', name: 'linkName-2' },
          { link: 'name-3', name: 'linkName-3' },
          { link: 'name-4', name: 'linkName-4' },
          { link: 'name-5', name: 'linkName-5' },
        ]
      }
    },
    template: `
    <ul>
    	<li 
      	v-for="val in navlist"
        :key="val.id">
        <a :href=val.link :title=val.name>{{ val.name }}</a>
      </li>
    </ul>
    `
  })

  new Vue({
    el: '#navbar'
  })

Нет в сети, потому что просто

<div class="menu">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

.menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.menu div {
  border: 1px solid lightgray;
}

Можно даже еще круче сделать, как у вас в примере, без внешних рамок:

.menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.menu div {
  border-top: 1px solid lightgray;
  border-right: 1px solid lightgray;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  // добавляете в див иконку и текст, все само встанет как надо
}

.menu div:nth-child(-n+3) {
  border-top: 0;
}

.menu div:nth-child(3n) {
  border-right: 0;
}

mousemove_event
пример https://codepen.io/andrejsharapov/pen/GPvmgG

https://codepen.io/andrejsharapov/pen/pmdNKW
https://codepen.io/32bitkid/pen/LKZzMR

может поможет

<div class="zero">0</div>
<style>
.zero {
  font-size: 15vw;
  font-family: sans-serif;
  font-weight: 900;
  color: white;
  text-shadow: 5px 5px 0 red;
}
</style>

держи

ищите breadcrambs в шаблонах и убирайте. а вообще я бы их не убирал, они полезные. можете их просто скрыть через стили, если ни вам мешают

можно так https://codepen.io/andrejsharapov/pen/eXKYBy только стилизуй по другому

Гляньте ваш код еще раз и сравните его поддержку тут. Пробежавшись по строчкам вы поймете, что из вашего кода не поддерживается иешкой. Не за что и удачных разработок.