title: Vuejs3/Vuex4 conditional render on promise fulfillment
body: <p>I have custom objects for holding child objects full of data. The child objects are initiated with null values for all their properties, so the objects can be referenced and their properties filled from remote sources. This creates a lazy-loading setup.</p>
  <p>This code is going to be <em>extremely</em> trimmed down, but everything relevant should be here:</p>
  <pre><code>class Collection extends Object {
      constructor(){
          this.loaded = false;
          var allLoaders = [];
          var loaderPropmises = [];
          var resolver;
          const $this = this;
          var trackLoaders = function(){
              $this.loaded = false;
              loaderPromises.push(Promise.all(allLoaders).then(() =&gt; {
                  //... irrelevant logic in here to ensure only the latest promise sets loaded to true
                  $this.loaded = true; //This is getting called where I expect
                  resolver(); 
              }));
          }
          
          //hook for outside things to watch the promise if they want
          this.loader = new Promise((resolve) =&gt; {
              //this only gets resolved once, which is fine
              resolver = resolve;
          });
  
  
          //... bunch of code around adding child objects, but the important part:
          this.add(child){
              this[child.id] = child;
              this.allLoaders.push(child.loader); 
              trackLoaders();
          }
      }
  }
  </code></pre>
  <p>The child then looks like:</p>
  <pre><code>class Child extends Object {
       constructor(){
           this.loaded = false;
           var resolver;
           const $this = this;
           this.loader = new Promise((resolve) =&gt; {
               resolver = resolve;
           }).then((){
               $this.loaded = true;
           });
  
           this.populate(data){
               //bunch of stuff to set data to properties on this object
               resolver();
           }
       }
  }
  </code></pre>
  <p>In Vuex 4 I have these Collections as properties on an &quot;AppData&quot; object in the store:</p>
  <pre><code>const store = createStore({
      state: function(){
          AppData: {}
      },
      mutations: {
          setupCollection(state, name){
              if (!Object.hasOwnProperty.call(state.AppData, name){
                  state.AppData[name] = new Collection();
              }
          }
      },
      actions: {
          //this is called on each row of data returned from an Axios call
          add (context, {name, data}){
              context.state.AppData[name][data.id].populate(data);
          }
      }
  });
  </code></pre>
  <p>The idea is that whenever a <code>Child</code> is added to a <code>Collection</code>, the collection <code>loaded</code> property will be false until all the <code>Child</code> loader promises resolve. This all executes perfectly... Except that the <code>loaded</code> bools aren't reactive.</p>
  <p>Right now, I have a <code>Promise.all</code> in each component's Created function that flags the component as &quot;loaded&quot; once all the objects needed for the component have had their &quot;loader&quot; promises resolved. This absolutely works, but isn't ideal as different data will be available at different times, and there are sometimes hundreds or more of these classes on screen at once. What I'm trying to accomplish is:</p>
  <pre><code>&lt;div v-if=&quot;!myCollection.loaded&quot;&gt;
      Loading...
  &lt;/div&gt;
  &lt;div v-else&gt;
      Show the data I want here {{myCollection.property}}
  &lt;/div&gt;
  </code></pre>
  <p>So I have two thoughts on overcoming this, either of which would be great:</p>
  <ul>
  <li><p>VueJS3 no longer has a need for Vue.set(), because Proxies. How would I make the <code>loaded</code> bools here reactive then? Or more specifically, what am I doing that prevents this from working?</p>
  </li>
  <li><p>Alternatively, is there a practical way to use the <code>loader</code> promise directly in a template?</p>
  </li>
  </ul>