title: I have a VueJs 3 menu component and need to set cursor for selected element on render
body: <p>I'm so far really pleased with how simple it was to setup a menu that has a sliding cursor to show where you are hovering:</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;menu&quot;&gt;
      &lt;div class=&quot;logo&quot;&gt;
        &lt;span&gt;**Logo Here **&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class=&quot;menuBar&quot; ref=&quot;menuBar&quot;&gt;
        &lt;ul&gt;
          &lt;li v-for='topLevel in menu' :key='topLevel.id' :ref='topLevel.id' v-on:mouseover=&quot;moveCursor(topLevel.id)&quot; &gt;
            &lt;span&gt;&lt;a :href=&quot;/topLevel.link/&quot;&gt;{{ topLevel.text }}&lt;/a&gt;&lt;/span&gt;
            &lt;ul&gt;
              &lt;li v-for='child in topLevel.children' :key='child.text'&gt;
                &lt;span&gt;&lt;a :href=&quot;/child.link/&quot;&gt;{{ child.text }}&lt;/a&gt;&lt;/span&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;div class=&quot;cursor&quot; :style=&quot;{ left: cursorPosition, width: cursorWidth, visibility: cursorVisible }&quot; &gt;&lt;/div&gt;
      &lt;/div&gt;
      
    &lt;/div&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
  import { ref } from 'vue';
  
  export default {
    name: 'Header',
    setup() {
  
      const cursorPosition = ref('0px');
      const cursorWidth = ref('0px');
      const cursorVisible = ref('visible');
  
      const menu = ref([
       { 
         text: 'Device Access', 
         id: 'device_access',
         children: [
            { 
              text: 'Interactive',
              link: '/connection_center'
            },{ 
              text: 'Reservation',
              link: '/reserve_probe'
            }, { 
              text: 'Reservation Vue',
              link: '/reservation.html'
            }
          ]
        }, {
          text: 'Automation',
          id: 'automation',
          children: [
            { 
              text: 'Builder',
              link: '/builder', 
            },{
              text: 'Execution Results',
              link: '/test_suite_execution_results'
            },
          ]
        }, {
          text: 'Site Admin',
          id: 'site_admin',
          children: [
            { 
              text: 'Accounts',
              link: '/admin_accounts', 
            },{
              text: 'Settings',
              link: '/admin_settings', 
  
            }
          ]
        },{
          text: 'Reporting', 
          id: 'reporting',
          children: [
            { 
              text: 'Administrative',
              link: '/administrative_reporting'
            },{ 
              text: 'Historical',
              link: '/historical_reporting'
            },
          ]
        }, {
          text: 'Help', 
          id: 'help',
          children: [
            { 
              text: 'User Documentation',
              link: '/docs/'
            },{ 
              text: 'API Documentation',
              link: '/apidocsindex'
            }
          ]
        }
      ]);
      
      return {
        menu,
        cursorPosition,
        cursorWidth,
        cursorVisible
      }
    },
    methods: {
      mouseover: function(refId) {
        this.moveCursor(refId);
      },
      selectCurrent: function() {
        this.moveCursor(this.selectedMenuRef);
      },
      moveCursor: function(refId) {
        var menuRect = this.$refs.menuBar.getBoundingClientRect();
        var refItem = this.$refs[refId];
        var width = refItem.offsetWidth;
        var itemRect = refItem.getBoundingClientRect();
        this.cursorPosition = (itemRect.left - menuRect.left) + &quot;px&quot;;
        this.cursorWidth = width + &quot;px&quot;;
      }
    }
    
        
        //  {
        //   link: '/Session/logout', text: 'Logout',
        //   [
        //     { link: '#' event='preferences', text: 'Preferences',
        //   ]
        // }
  
  
  }
  &lt;/script&gt;
  
  &lt;!-- Add &quot;scoped&quot; attribute to limit CSS to this component only --&gt;
  &lt;style lang=&quot;scss&quot; scoped&gt;
  
    @import &quot;../styles/_colors.scss&quot;;
    
    div.menu {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 65px;
      background: $headerBackground;
      border-bottom: 3px solid $headerBorder;
      
      &gt; .logo {
        height: 72px;
        padding-left: 10px;
        padding-top: 3px;
        float: left;
      }
  
      &gt; .menuBar {
        float: left;
        height: calc(100% - 20px);
        width: 900px;
        margin: 15px 0 0 50px;
        float: left;
        position: relative;
        
        &gt; .cursor {
          position: absolute;
          height: 3px;
          background: $menuCursor;
          transition: left 0.2s ease-in-out, width 0.3s ease-in-out;
        }
  
        ul {
          list-style-type: none;
          display: block;
          padding: 0;
          margin: 0;
        }
  
        &gt; ul {
          width: 100%;
          display: block;
  
          &gt; li {
            float: left;
            display: block;
            text-indent: none;
            position: relative;
            margin: 0;
            padding: 12px 25px 18px 15px;
            
            &amp;::after {
              position: absolute;
              top: 21px;
              right: 10px;
              width: 4px;
              height: 4px;
              border-bottom: 1px solid #000000;
              border-right: 1px solid #000000;
              content: &quot;&quot;;
              transform: rotate(45deg);
              transition: border-color 0.2s ease;
            }
  
            &amp;:hover {
              
              &gt; span &gt; a {
                color: $menuHover;
              }
  
              &gt; ul {
                height: auto;
                transition: all;
                transition-duration: 0.1s;
                border: 1px solid $menuBorder;
                border-top: none;
              }
            }
  
            &gt; span {
  
              text-align: left;
              font-size: 14px;
              line-height: 16px;
  
              &gt; a {
                text-decoration: none;
                color: $menuText;
                text-transform: uppercase;
              }
  
            }
  
            &gt; ul {
              height: 0;
              position: absolute;
              top: 50px;
              left: 0;
              width: 175px;
              background: $headerBackground;
              border: none;
              overflow: hidden;
              margin: 0;
              padding: 0;
  
              &gt; li {
                margin: 0;
                display: block;
                padding: 0px 5px 10px 20px;
  
                &gt; span {
                  text-align: left;
                  font-size: 14px;
                  line-height: 16px;
  
                  &gt; a {
                    text-decoration: none;
                    color: $menuText;
                  }
  
                }
  
                &amp;:hover &gt; span &gt; a {
                  color: $menuHover;
                }
              }
            }
          }
        }
      }
    }
  &lt;/style&gt;
  </code></pre>
  <p>I want to run the method selectCurrent after the menu is rendered to have the cursor hover over the current selected menu option, but everything I've tried so far blows up in undefined refs.</p>