title: custom template with v-if is giving error while using inside li item - vue js
body: <p>I have to display menus in navigation bar. There are multiple menu items(Home, About etc). Some menu items are having submenus(2nd -3rd level). So, i created one directive to show up submenus while hovering over the menu in navigation bar.</p>
  <p><strong>Here is my code(old code)</strong> - v-show-sub-menu is the directive</p>
  <pre><code>&lt;ul class=&quot;main__menus&quot;&gt;
              &lt;li v-show-sub-menu v-if=&quot;m.displayMenu==='Y'&quot; v-for=&quot;(m, idx) in Menus&quot; class=&quot;main__menu&quot; :key=&quot;idx&quot;
                  :class=&quot;{'main__menu--selected':chkMenu(m)}&quot; @click=&quot;screen.moveMenu(m)&quot;&gt;
                  &lt;div class=&quot;main__menu-name&quot;&gt;{{getMenuName(m)}}&lt;/div&gt;
                  &lt;ul class=&quot;main__menu__second&quot; v-show=&quot;!hideSubMenu&quot; :class=&quot;secondMenuClasses(m)&quot; @click.stop&gt; 
                     // 2nd - 3rd level menu 
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>
  <p>It is working fine but as per vue standard i refactored code and remove the v-if from v-for  in same li tag. I used custom template syntax to check the menu will be displayed in Navigation bar or not like this below.</p>
  <pre><code>&lt;ul class=&quot;main__menus&quot;&gt;
              &lt;li v-for=&quot;(m, idx) in Menus&quot;
                  :key=&quot;idx&quot;
                  v-show-menu
                  class=&quot;main__menu&quot;
                  :class=&quot;{'main__menu--selected':chkMenu(m)}&quot;
                  @click=&quot;screen.moveMenu(m)&quot;
              &gt;
                  &lt;template v-if=&quot;m.displayMenu ==='Y'&quot;&gt;
                      &lt;div class=&quot;main__menu-name&quot;&gt;
                          {{ getMenuName(m) }}
                      &lt;/div&gt;
                      &lt;ul v-show=&quot;!hideSubMenu&quot; class=&quot;main__menu__second&quot; :class=&quot;secondMenuClasses(m)&quot; @click.stop&gt;
                          // 2nd - 3rd level children
                      &lt;/ul&gt;
                  &lt;/template&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>
  <p>Directive</p>
  <pre><code>showSubMenu: {  // It is showing sub menus while hovering over menus in navigation bar
          inserted(el) {
              const menu = el.querySelector('.main__menu__second');
  
              el.addEventListener('mouseenter', () =&gt; {
                  const { left, height } = el.getBoundingClientRect();
                  if (document.querySelector('#menu-area')) {
                      document.querySelector('#menu-area').appendChild(menu);
                  }
                  menu.style.display = 'block';
                  menu.style.top = `${height}px`;
                  menu.style.left = `${left}px`;
              });
              menu.addEventListener('mouseenter', () =&gt; {
                  const { left, height } = el.getBoundingClientRect();
                  menu.style.display = 'block';
                  menu.style.top = `${height}px`;
                  menu.style.left = `${left}px`;
              });
              el.addEventListener('mouseleave', () =&gt; {
                  menu.style.display = 'none';
              });
              menu.addEventListener('mouseleave', () =&gt; {
                  menu.style.display = 'none';
              });
          }
      }
  </code></pre>
  <p>But, It is breaking some where and directive is giving null error and there are css issues also visible. I am using computed property to solve this issue.</p>
  <p><strong>How to fix this problem and why it is behaving strange ?</strong></p>