How to apply a filter within a Vuejs component?

You can add local filters to each component:

filters: {
  filterName: function (value) {
    // some logic
    var result = ....
    // 
    return result;
  }
}

call that filter:

<div> {{ value | filterName }} </div>

It is slightly hidden and I'm not sure if it is documented, but there is a Github issue on how to use filters in components.

To use getters and setters, computed properties are perfect:

Vue.component('example', {
    props: {
        msg: {
            type: String,
        }
    },
    computed: {
        useMsg: {
            get: function() {
                return this.$options.filters.foo(this.msg);
            },
            set: function(val) {
                // Do something with the val here...
                this.msg = val;
            },
        },
    }
});

And the corresponding markup:

<example inline-template :msg="My foo is full of foo drinks!">
    {{ useMsg }}
</example>