title: make vuejs component wait for the variable to become available
body: <p>I have an VueJS component that list the contents of the array to the page. <code>runner.availableResources.cores</code> and <code>runner.availableResources.memory</code> come from bus creates using<code>busmq</code> npm package. They take awhile to become available, about 15s depending on IO buffer and thus not immediately available when the page renders. </p>
  
  <p>The error is: <code>[Vue warn]: Error in render: "TypeError: Cannot read property 'cores' of undefined"</code></p>
  
  <p>How can I make Vue keep checking for values to become available?</p>
  
  <pre><code>&lt;template&gt;
    &lt;b-col&gt;
      &lt;b-table striped hover :items="formatRunners"&gt;&lt;/b-table&gt;
    &lt;/b-col&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  const fileSize = require("filesize");
  export default {
    name: "RunnersList",
    props: {
      runners: Array
    },
    computed: {
      formatRunners() {
        const runnerItems = [];
        for (const runner of this.runners) {
          const newItem = {};
          newItem.id = runner.id;
          newItem.isPublic = runner.marathon.isPublic;
          newItem.AvailableCpu = runner.availableResources.cores;
          newItem.AvailableMemory = fileSize(runner.availableResources.memory);        
          runnerItems.push(newItem);
        }
        return runnerItems;
      }
    },
    data() {
      return {};
    }
  };
  &lt;/script&gt;
  </code></pre>