title: Why is my computed property not computing?
body: <p>Below is a single-file Vue.js template. The <code>note</code> object is passed to the template as a prop, and includes <code>audio_length</code> and <code>id</code>. </p>
  
  <pre><code>&lt;template&gt;
      &lt;span v-show="note.audio_length &gt; 0" class="audio-element-wrapper"&gt;
          &lt;audio controls preload="none"&gt;
              &lt;source :src="audioURL" type="audio/webm"&gt;
              Your browser does not support the audio element.
          &lt;/audio&gt;
          &lt;span&gt;
          ({{note.audio_length}}s)
              &lt;/span&gt;
      &lt;/span&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  module.exports = {
      mounted: function() {
          console.log("mounted audioelement", this.note.id);
      },
  
      props: ['note'],
  
      computed: {
          audioURL: function() {
              return "/notes/getAudio/" + this.note.id;
          }
      }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>However, when I load the component, the computed <code>audioURL</code> results in <code>/notes/getAudio/undefined</code>. Apparently, it runs before the <code>note</code> property is loaded. The code inside the curly braces is interpreted correctly. How can I bind the <code>src</code> property to the correctly computed url?</p>