I'm completely at a loss. For a few days now I have been trying to find a way to consistently get data from a FireStore and use it in my component.
The issues vary from data being received to late and Vue3 giving me an error that a property isn't available. I don't expect an error but just no data that would, by way of 2 way binding, pop up when the data becomes available.
I tried to create the property before calling it from FireStore but I still receive the same error. That is if things were consistent because sometimes it just works and doesn't show any data. Even when the value of the property is received and update. In the vue dev tool window I can see the data being there.
And after doing a bunch of trail and error I now get an error where is says "Property "_pStores" was accessed during render but is not defined on instance." which is thrown from the file "backend.js" (not created by me)
The vue install was done through the Vue CLI and I only added VueFire and Vuetify.
Any idea why Vue seems to be so inconsistent all the time?
<script setup>
import { useDocument, useFirestore } from 'vuefire'
import { collection,doc } from 'firebase/firestore'
import {useRoute} from "vue-router";
const route = useRoute();
const db = useFirestore()
let id = route.query.showid
const currentShow = useDocument(doc(collection(db, 'shows'), id))
</script>
<template>
{{currentShow.title}}
</template>