Vue Не работает фильтр в поле input

Сделал фильтр для фильтрации ввода чисел, но чего-то не хватает. Подскажите, почему не работает фильтр в поле input.

На странице он нормально работает:

<form action="" id="calc">
<input type="text" v-model="test" style="text-align: right">
<p>Model value : {{ test | numFilter }}</p>
</form>
    Vue.filter('numFilter', function (value) {
            return value.replace(/[^\d.]*/g, '')
                .replace(/([.])[.]+/g, '$1')
                .replace(/^[^\d]*(\d+([.]\d{0,5})?).*$/g, '$1');
})
var app = new Vue({
  el: '#calc',
  data: {
     test: ''
  }
});

Ссылка на codepen

Когда пытаюсь применить его к полю input, даже поле не выводиться:

<form action="" id="calc">
<input type="text" v-model="test | numFilter" style="text-align: right">
</form>

Ссылка на codepen