<div id="app" class="container">
  <h1>Form Example</h1>
  <div class="form-group">
    <label>Email [必須]</label>
    <input v-model="userInfo.email" type="email" class="form-control" placeholder="例) [email protected]">
    <span v-show="!validateEmail" class="text-warning">正しいEmailを入力してください</span>
  </div>
  <div class="form-group">
    <label>Tel [必須]</label>
    <input v-model="userInfo.tel" type="text" class="form-control" placeholder="例) 0311112222">
    <span v-show="!validateTel" class="text-warning">Telは数値で入力してください</span>
  </div>
  <div class="form-group">
    <label>ユーザー名</label>
    <input v-model="userInfo.userName" type="text" class="form-control" placeholder="例) user-1">
    <span v-show="!validateUserName" class="text-warning">ユーザー名は半角英数字で入力してください</span>
  </div>
  <button :disabled="!validation" type="button" class="btn btn-info">Next</button>
</div>

$(function () {
  new Vue({
    el: '#app',
    data: {
      userInfo: {
        email: '',
        tel: '',
        userName: ''
      }
    },
    computed: {
      validation: function () {
        return (this.validateTel &&
                this.validateEmail &&
                this.validateUserName);
      },
      validateTel: function () {
        var pattern = /^\d+$/; // 1文字以上の整数のみ許容
        return pattern.test(this.userInfo.tel.trim());
      },
      validateEmail: function () {
        var pattern = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return pattern.test(this.userInfo.email);
      },
      validateUserName: function () {
        if (this.userInfo.userName.length === 0) {
          return true;
        } else {
          var pattern = /^\w+$/; // 大文字小文字英数字、アンダースコアのみ許容
          return pattern.test(this.userInfo.userName);
        }
      }
    }
  });
});

** 以下引用 **
算出プロパティの代わりに、同じような関数をメソッドとして定義することも可能です。
最終的には、2つのアプローチは完全に同じ結果になります。

しかしながら、算出プロパティは依存関係にもとづきキャッシュされるという違いがあります。
算出プロパティは、それが依存するものが更新されたときにだけ再評価されます。

** 中略 **
対称的に、メソッド呼び出しは、再描画が起きると常に関数を実行します。
** 中略 **
キャッシングしたくない場合は、代わりにメソッドを使いましょう。

<!-- 上記部分省略 -->
  <div class="form-group">
    <label>Tel [必須]</label>
    <input v-model="userInfo.tel" @input="validateTel2" type="text" class="form-control" placeholder="例) 0311112222">
    <span v-show="!validateTel2()" class="text-warning">Telは数値で入力してください</span>
  </div>
<!-- 以下省略 -->

<!-- 上記部分省略 -->
    computed: {
       // ここは変更なし
    },
    methods: {
      validateTel2: function () {
        var pattern = /^\d+$/; // 1文字以上の整数のみ許容
        return pattern.test(this.userInfo.tel.trim());
      }
    }
<!-- 以下省略 -->