title: Rendering a menu in vue 3 after ajax method
body: <p>I've gotten this menu to work without filtering it, but now I'm doing an ajax request to filter out menu items the user isn't supposed to see, and I'm having some trouble to figure out how to set the resulting menu data, the line that is not working is commented below:</p>
  <pre><code>&lt;script&gt;
     import { ref } from 'vue';
     import axios from 'axios';
  
     var currentSelected = 'device_access';
  
     var menuData = [
     { 
        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',
      show: ['is_mxadmin', 'can_schedule_scripts'],
      children: [
        { 
          text: 'Builder',
          link: '/builder', 
        },{
          text: 'Execution Results',
          link: '/test_suite_execution_results'
        },
      ]
    }
  ];
  
  function hasMatch(props, list) {
    var match = false;
    for (var i=0; i &lt; list.length &amp;&amp; !match; i++) {
      match = props[list[i]];
    }
    return match;
  }
  
  export default {
    name: 'Header',
    setup() {
  
      const cursorPosition = ref('0px');
      const cursorWidth = ref('0px');
      const cursorVisible = ref('visible');
  
      //the menu is zero length until I get the data:
      const menu = ref([]);
  
      return {
        menu,
        cursorPosition,
        cursorWidth,
        cursorVisible
      }
    },
  
    created() {
       let that = this;
  
      axios.get('navigation_props')
        .then(function(res) {
          var data = res.data;
          var result = [];
          menuData.forEach(function(item) {
            if (!item.show || hasMatch(data, item.show)) {
              var children = [];
          
              item.children.forEach(function (child) {
                if (!child.show || hasMatch(data, child.show)) {
                  children.push({ text: child.text, link: child.link });
                }
              });
         
             if (children.length &gt; 0) {
                result.push({ text: item.text, 
                  children: children, lengthClass: &quot;length_&quot; + children.length });
              }
          }
      }); 
      //continues after comment
  </code></pre>
  <p>this is probably the only thing wrong, I've run this in the debugger and I'm getting the
  correct data:</p>
  <pre><code>    that.$refs.menu = result;
  </code></pre>
  <p>since the menu is not being rebuilt, then this fails:</p>
  <pre><code>    //this.restoreCursor();
    })
    .catch(error =&gt; {
      console.log(error)
       // Manage errors if found any
    });
  },
  </code></pre>