title: How can I process Vue.js props before actually using them?
body: <p>Imagine the following situation:</p>
  
  <p>I have a <code>Menu</code> component with 2 props:</p>
  
  <ul>
  <li><code>items</code></li>
  <li><code>filterTerm</code></li>
  </ul>
  
  <p>The <code>Menu</code> component can't just simply display the items.. It has to filter it first according to the given <code>filterTerm</code>.</p>
  
  <p>This raises 2 questions:</p>
  
  <ol>
  <li><p>I don't know where to process <code>items</code> before displaying them. I've researched the <a href="http://vuejs.org/guide/components.html" rel="nofollow">Components documentation</a> and they don't seem to mention any <em>life-cycle</em> methods.</p></li>
  <li><p>Is it a good idea to <em>mutate</em> the received <code>items</code> prop? Unless Vue performs a deep clone on every render, which I find unreasonable, mutating a prop may have side-effects. Therefore, I shouldn't actually filter the received <code>items</code>. I should <em>clone</em>  it first, but then where would I do it?  I could do it in the <code>data:function() { }</code> but then my <code>methods</code> are not available there :(</p></li>
  </ol>
  
  <p>So, what is the proper way of filtering the <code>items</code> before displaying them?</p>