How to apply a filter within a Vuejs component?
<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>