Vue3/Firebase form with default values - fix my code!

Job ID: 34023586

Budget: $30 – $250 USD

New to Vue, JS and Firebase, trying to build a test project. Embarrassed to say I have been stuck on this particular problem for several days. Trying to write this question as best I can given my current level of understanding which is pretty basic.

Desired Outcome: What I am trying to do is query firebase database to get the last event created by current user so that, if it exists, I can then pre-fill some of the Vue form data when they create their next entry.

Sounds simple enough but tutorials/web searches only seem to cover EITHER a.) single document retrieval/display when you already have the document id, OR, b.) how to retrieve and display all documents from a collection in a list. My need is sort of hybrid in that don't know the document ID until I query to get it.

Currently, I am able to query the DB just fine and can verify it returns the results I want to an object which I can log to the console (file attached) and can 'see' the data in the console/object, but, can't for the life of me figure out how to get to the data within that object once back on the doc template.

Attached is my code. The file getLastEvent-SO.js contains the javascript code to interreact with firebase called by the vue page CreateEventForm-SO.vue. Lastly, the file console.log is directly from the Chrome browser console. You can see the data is there but currently completely inaccessible from with document template.