I’m trying to access some data stored in the Magento_Customer/js/customer-data object

I have the following files:

— garage.js —

define([    'Magento_Customer/js/customer-data' ], function(customerData){     'use strict';     return {         getCustomerName: function(){             return customerData.get("garage")();         }     } }); 

— sidebar.phtml —

<script type="text/javascript">     require(['Revival_Garage/js/view/garage'], function(garage){         console.log("--");         console.log(garage.getCustomerName());         console.log("--");         // document.getElementById("customer_garage").innerHTML = garage.getCustomerName();     }); </script> <span id="customer_garage"> </span> 

When the page loads and my JavaScript automatically executes, my console has the following output:

Which, obviously isn’t quite what I was hoping for.

If i run the same exact code in my console once the page is totally loaded, I get this:

Which does have the data I expect.

Why is it that I can’t access this data on page load?

I don’t see any mention anywhere in any of the documentation for customer-data stating I need to run my js any specific way (eg. waiting on DOM load)

Am I missing something?

Relevant pages I could find, documentation-wise

Magento2 StackExchange:
Magento 2: how do customer sections / sections.xml work?

Alan Storm’s blog Understanding the limitations of sections.xml

In My own troubleshooting I found out requirejs has a domReady plugin you can use, so i also tried to add 'domReady!' to my define call. which yielded the same results as above.