title: Is it within best practices to use a promise as a prop in Vue 3?
body: <p>There are a lot of questions here about how to handle prop values in Vue.js that have to be fetched asynchronously before an actual value becomes available. I've run into roadblocks of my own trying to code around asynchronous prop data; then, recently, I realized I could send a promise object as a prop from the parent and react to the settled value of the promise in a child component.</p>
  <p>Checkout the pseudocode snippet I've included below.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>//PARENT COMPONENT
  &lt;Parent :prop="myPromiseObject()" /&gt;
  
  //CHILD COMPONENT
  &lt;template v-if="templateData"&gt;
    {{ templateData }}
  &lt;/template&gt;
  
  &lt;script setup&gt;
    const props = defineProps({
      prop: {
        type: Object //Promise from Parent
      }
    })
    
    const templateData = ref(null);
    const templateDataErr = ref(false);
    
    prop.then(d =&gt; templateData.value = d)
      .catch(e =&gt; templateDataErr = true)
  &lt;script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>In a recent use case, this approach solved my bug and helped simplify my code, but I'm unsure if this approach fits within the best practices for props in Vue. Can anyone speak to the validity of this approach?</p>