title: Vue 3 composition API, undefined variable, lifecycle
body: <p>I am quite new to Vue.js and while developing my first project i have stumbled upon a problem which I think is related to the component's lifecycle.</p>
  <p>The context is the following:
  I am using Vue 3 with composition API.</p>
  <p>I have a &quot;Map&quot; component in which I use d3.js to show a chart.
  In my Setup() method I have onBeforeMount() and onMounted().
  In onBeforeMount() method, I want to use data from my Firestore database for the values in the chart. The console.log on line 47 shows the data correctly.
  In onMounted(), is where I plan to put my d3 chart. But when I try to access the data as in console.log on line 55, I get undefined...</p>
  <p>Ideally, from &quot;Map&quot; component, I want to fetch the data from my database and use it in order to create the chart and then have the component render the chart.
  Then I would have another component called 'MapSettings&quot; that will be able to alter the data in &quot;Map&quot; such as filters etc...and have the values automatically updated in the chart.
  Finally, both components will be siblings and have same parent component. So &quot;Map&quot; and &quot;MapSettings&quot; are on same hierarchical level.</p>
  <p>But first I need to understand why I am getting undefined.. Any help or suggestion would be greatly appreciated!</p>
  <p><a href="https://i.stack.imgur.com/u4Zwt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u4Zwt.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/nu0YI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nu0YI.png" alt="enter image description here" /></a></p>