How to properly wait for props in child component from parent

Question

I have created a child component which iterates to a variable that was sent from the parent component. The parent components sends an axios request to the backend and then sends it down to the child component. Sometimes it does work but sometimes it renders before the prop gets to the child component and it triggers an undefined error for the loop.

Parent Component

  <div class="permissions">
    <p class="sub-heading-2">Permission Selection</p>
      <PermissionSelection 
        v-if="permissions"
        @permissionsData="log" 
        v-for="category in categories" 
        :key="category.id"
        :category="category" 
        :companies="companies" 
        :userPermission="permissions"
        :errors="errors"
        :company_errors="company_assignment_error"
    />
  </div>

Child Component

 onBeforeMount(() => {
   watch(props, () => {
     props.userPermission.permission.forEach(permission => {
        if(props.category.category == permission.permission[0].name) {
          isCollapsed.value = true
          subcategory.value = true

          if(permission.is_reporting_to == true && permission.is_attribute == false && propsLoadCount.value == 1) {
            assign.value = 'reporting'
          } else if (permission.is_reporting_to == false && permission.is_attribute == true) {
              assign.value = 'company'

              if(!company_errors_arr.value.includes(permission.permission[0].name) && propsLoadCount.value == 1) {
                companiesAssigned.value = []

                permission.attributes.forEach(attribute => {
                   companiesAssigned.value.push(attribute.attributable_id)
                })
              }

              if(errors_arr.value.includes(permission.permission[0].name)) {
                 assign.value = ''
              }
                            
              if(companiesAssigned.value.length === props.companies.length) {
                 isAllChecked.value = 'true'
              }
          }
        }
     })
   }, {deep: true})
 })

I have already tried putting the function inside onBeforeMount but it does not fix the problem. The only method that I had successfully made it work is by using a setTimeout function before proceeding with the loop, this works but I don't think it would be a permanent solution. Just need some help with making the child component wait until the prop is there before actually running the code for the loop.