onMount called after function call from parent component

I have the following minimal example:

Component A:

<script lang="ts">  import {tick} from 'svelte';  import LocationSelector from './LocationSelector.svelte';  let locationSelector: LocationSelector;  let selectedCompany: string;  async function updateAvailableLocations(){    await tick();    locationSelector.setAvailableLocations(selectedCompany);  }  $: selectedCompany, updateAvailableLocations();</script><input  type="text"  bind:value={selectedCompany} />{#if selectedCompany}<LocationSelector bind:this={locationSelector}/>{/if}

LocationSelector.svelte component:

<script lang="ts">  let availableLocations: Locations[];  export function setAvailableLocations(type: string) {          for (const location of availableLocations ) {              if(company == location.company) {                  .... (Code to set the available locations in the dropdown)              }          }  }  onMount(async () => {    try {      availableLocations = await api.getAllLocations();    } catch (error) {      consolo.log("...")    }  }</script>...

Problem

My problem is that when the selectedCompany value is going from undefined or and empty string to a value and therefore the "if" is true the LocationSelector.svelte component will be shown but the onMount function of the LocationSelector.svelte will be called after the setAvailableLocations function. Which means the availableLocation is empty and therefore useless.

Why is setAvailableLocations called after the onMount in this case?