title: How to apply a filter within a Vuejs component?
body: <p>If I have a simple filter, say:</p>
  
  <pre><code>Vue.filter('foo', function (value) {
      return value.replace(/foo/g, 'bar');
  });
  </code></pre>
  
  <p>And a simple component:</p>
  
  <pre><code>Vue.component('example', {
      props: {
          msg: String,
      },
  });
  </code></pre>
  
  <p>And within the markup:</p>
  
  <pre><code>&lt;example inline-template :msg="My foo is full of foo drinks!"&gt;
      {{ msg }}
  &lt;/example&gt;
  </code></pre>
  
  <p>I can simply apply the filter as such:</p>
  
  <pre><code>&lt;example inline-template :msg="My foo is full of foo drinks!"&gt;
      {{ msg | foo }}
  &lt;/example&gt;
  </code></pre>
  
  <p>I can easily apply a filter within the template, however I want to move that logic back into the component. </p>
  
  <p>It doesn't <strong>need</strong> to be a filter, but basically a way to create a getter and setter for data fields. </p>
  
  <p>Something like: </p>
  
  <pre><code>Vue.component('example', {
      props: {
          msg: {
              type: String,
              getValue: function(value) {
                  return value.replace(/foo/g, 'bar');
              },
          }
      },
  });
  </code></pre>