diff --git a/.gitignore b/.gitignore
index ef3312f..d311984 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,5 +3,6 @@ coverage
 node_modules
 .DS_Store
 *.log
+*.gz
 *.swp
 *~
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5d98378..d02fbff 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,31 @@
+<a name="2.0.0-alpha.7"></a>
+# [2.0.0-alpha.7](https://github.com/vuejs/vue-validator/compare/v2.0.0-alpha.6...v2.0.0-alpha.7) (2015-12-10)
+
+
+### Features
+
+* **syntax:** support array syntax on v-validate expression ([bf33bb4](https://github.com/vuejs/vue-validator/commit/bf33bb4))
+
+
+
+<a name="2.0.0-alpha.6"></a>
+# [2.0.0-alpha.6](https://github.com/vuejs/vue-validator/compare/v2.0.0-alpha.6...v2.0.0-alpha.6) (2015-12-07)
+
+
+### Performances
+
+* **bundle**: more compact the vue-validator
+  about 20% smaller build with rollupjs.
+
+  - before
+    - vue-validator.min.js 11701
+    - vue-validator.js 26180
+  - after
+    - vue-validator.min.js 9309
+    - vue-validator.js 20713
+
+
+
 <a name="2.0.0-alpha.5"></a>
 # [2.0.0-alpha.5](https://github.com/vuejs/vue-validator/compare/v2.0.0-alpha.4...v2.0.0-alpha.5) (2015-11-24)
 
diff --git a/README.md b/README.md
index 55b48b9..ccc80df 100644
--- a/README.md
+++ b/README.md
@@ -58,8 +58,8 @@ We can use `validator` element directive and `v-validate` directive. The followi
 <div id="app">
   <validator name="validation1">
     <form novalidate>
-      <input type="text" v-validate:username.required>
-      <input type="text" v-validate:comment.maxlength="256">
+      <input type="text" v-validate:username="['required']">
+      <input type="text" v-validate:comment="{ maxlength: 256 }">
       <div>
         <span v-show="$validation1.username.required">Required your name.</span>
         <span v-show="$validation1.comment.maxlength">Your comment is too long.</span>
@@ -139,40 +139,44 @@ The various top-level properties has been defined in the validation scope, and t
 - `modified`: if modified field exist even **one** in validate fields, return `true`, else `false`.
 - `dirty`: if dirty field exist even **one** in validate fields, return `true`, else `false`.
 - `pristine`: whether **all** fields is pristine, if so, return `true`, else `false`.
-- `errors`: if invalid even one exist, return all field error message wrapped with object, else `undefined`.
+- `messages`: if invalid even one exist, return all field error message wrapped with object, else `undefined`.
 
 
 # Validator syntax
 `v-validate` directive syntax the below:
 
 ```
-    v-validate:field.[validator]+[="primitive literal | object literal | binding"]
+    v-validate:field="array literal | object literal | binding"
 ```
 
 ## Literal
 
-### Primitive
-The below is example that using literal of string value:
+### Array
+The below is example that using array literal:
 
 ```html
 <validator name="validation">
   <form novalidate>
-    Zip: <input type="text" v-validate:zip.pattern="'/^[0-9]{3}-[0-9]{4}$/'"><br />
+    Zip: <input type="text" v-validate:zip="['required']"><br />
     <div>
-      <span v-if="$validation.zip.pattern">Invalid format of your zip code.</span>
+      <span v-if="$validation.zip.required">Required zip code.</span>
     </div>
   </form>
 </validator>
 ```
 
+Like the `required`, if you don't need to specify the rule, you should use it.
+
+
 ### Object
 The below is example that using object literal:
 
 ```html
 <validator name="validation">
   <form novalidate>
-    ID: <input type="text" v-validate:id.minlength.maxlength="{ minlength: 3, maxlength: 16 }"><br />
+    ID: <input type="text" v-validate:id="{ required: true, minlength: 3, maxlength: 16 }"><br />
     <div>
+      <span v-if="$validation.id.required">Required Your ID.</span>
       <span v-if="$validation.id.minlength">Your ID is too short.</span>
       <span v-if="$validation.id.maxlength">Your ID is too long.</span>
     </div>
@@ -180,6 +184,21 @@ The below is example that using object literal:
 </validator>
 ```
 
+You can specify the rule value on the object literal. Like the `required`, you can specify the **dummy rule** value on the literal object.
+
+And also, you can specify strict object as the below:
+
+```html
+<validator name="validation">
+  <form novalidate>
+    ID: <input type="text" v-validate:id="{ minlength: { rule: 3 }, maxlength: { rule: 16 } }"><br />
+    <div>
+      <span v-if="$validation.id.minlength">Your ID is too short.</span>
+      <span v-if="$validation.id.maxlength">Your ID is too long.</span>
+    </div>
+  </form>
+```
+
 ## Binding
 The below is example that using binding:
 
@@ -198,7 +217,7 @@ new Vue({
 <div id="app">
   <validator name="validation">
     <form novalidate>
-      ID: <input type="text" v-validate:id.minlength.maxlength="rules"><br />
+      ID: <input type="text" v-validate:id="rules"><br />
       <div>
         <span v-if="$validation.id.minlength">Your ID is too short.</span>
         <span v-if="$validation.id.maxlength">Your ID is too long.</span>
@@ -215,9 +234,9 @@ You can grouping validation results. the below example:
 
 ```html
 <validator name="validation1" :groups="['user', 'password']">
-  username: <input type="text" group="user" v-validate:username.required><br />
-  password: <input type="text" group="password" v-validate:password1.required.minlength="{ minlength: 8 }"/><br />
-  password (confirm): <input type="text" group="password" v-validate:password2.required.minlength="{ minlength: 8 }"/>
+  username: <input type="text" group="user" v-validate:username="['required']"><br />
+  password: <input type="text" group="password" v-validate:password1="{ minlength: 8, required: true }"/><br />
+  password (confirm): <input type="text" group="password" v-validate:password2="{ minlength: 8, required: true }"/>
   <div class="user">
     <span v-if="$validation1.username.required">Required your name.</span>
   </div>
@@ -232,10 +251,10 @@ You can specify error message that can get the validation scope.
 
 ```html
 <validator name="validation1">
-  username: <input type="text" v-validate:username.required="{
+  username: <input type="text" v-validate:username="{
     required: { rule: true, message: 'required you name !!' }
   }"><br />
-  password: <input type="text" v-validate:password.required.minlength="{
+  password: <input type="text" v-validate:password="{
     required: { rule: true, message: 'required you password !!' },
     minlength: { rule: 8, messsage: 'your password short too !!' }
   }"/><br />
@@ -270,7 +289,7 @@ new Vue({
 ```html
 <div id="app">
   <validator name="validation1">
-    comment: <input type="text" @valid="onValid" @invalid="onInvalid" v-validate:comment.required/>
+    comment: <input type="text" @valid="onValid" @invalid="onInvalid" v-validate:comment="[required]"/>
   </validator>
 </div>
 ```
@@ -295,7 +314,7 @@ new Vue({
 ```html
 <div id="app">
   <validator name="validation1">
-    address: <input type="text" v-validate:address.email><br />
+    address: <input type="text" v-validate:address=['email']><br />
     <div>
       <span v-if="$validation1.address.email">invalid your email address format.</span>
     </div>
@@ -308,7 +327,6 @@ new Vue({
 
 # TODO
 - async validation
-- errors properties
 - validate timing customize with options
 - local asset registration (`compontents` asset-like)
 - server-side validation error applying
diff --git a/config/karma.conf.js b/config/karma.conf.js
index 08ab418..624f8ab 100644
--- a/config/karma.conf.js
+++ b/config/karma.conf.js
@@ -29,7 +29,7 @@ module.exports = function (config) {
       devtool: 'source-map',
       module: {
         noParse: [
-          /node_modules\/sinon\//,
+          /node_modules\/sinon\//
         ],
         loaders: [{
           test: /\.js$/,
diff --git a/config/webpack.e2e.conf.js b/config/webpack.e2e.conf.js
index 4c5cf4c..3022f5d 100644
--- a/config/webpack.e2e.conf.js
+++ b/config/webpack.e2e.conf.js
@@ -1,17 +1,29 @@
+var webpack = require('webpack')
+
 module.exports = {
-  entry: {
-    app: ['webpack/hot/dev-server', './test/e2e/index.js']
-  },
+  entry: './test/e2e/index.js',
   output: {
     path: './test/e2e',
-    filename: 'index.build.js'
+    filename: 'e2e.js'
   },
   module: {
     loaders: [{
       test: /\.js$/,
-      exclude: /node_modules/,
-      loader: 'babel'
+      exclude: /node_modules|vue\/dist/,
+      loader: 'babel',
+      query: {
+        presets: ['es2015']
+      }
     }]
   },
-  devtool: 'inline-source-map'
+  devtool: 'source-map',
+  devServer: {
+    contentBase: './test/e2e',
+    port: 8080,
+    hot: true,
+    inline: true
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin()
+  ]
 }
diff --git a/config/webpack.test.conf.js b/config/webpack.test.conf.js
index 2017d73..af1e301 100644
--- a/config/webpack.test.conf.js
+++ b/config/webpack.test.conf.js
@@ -10,7 +10,7 @@ module.exports = {
   devtool: 'source-map',
   module: {
     noParse: [
-      /node_modules\/sinon\//,
+      /node_modules\/sinon\//
     ],
     preLoaders: [{
       test: /\.js$/,
diff --git a/dist/vue-validator.common.js b/dist/vue-validator.common.js
index cee31c5..1a58893 100644
--- a/dist/vue-validator.common.js
+++ b/dist/vue-validator.common.js
@@ -1,5 +1,5 @@
 /*!
- * vue-validator v2.0.0-alpha.6
+ * vue-validator v2.0.0-alpha.7
  * (c) 2015 kazuya kawaguchi
  * Released under the MIT License.
  */
@@ -334,40 +334,27 @@ var Validation = (function () {
     this.touched = false;
     this.dirty = false;
     this.modified = false;
-    this.validates = this._buildValidates(dir);
+    this.validators = Object.create(null);
   }
 
   babelHelpers.createClass(Validation, [{
-    key: '_buildValidates',
-    value: function _buildValidates(dir) {
-      var arg = arguments.length <= 1 || arguments[1] === undefined ? null : arguments[1];
-
+    key: 'setValidation',
+    value: function setValidation(name, arg, msg, fn) {
       var resolveAsset = exports$1.Vue.util.resolveAsset;
-      var camelize = exports$1.Vue.util.camelize;
 
-      var ret = Object.create(null);
-      var validates = dir.modifiers;
+      var validator = this.validators[name];
+      if (!validator) {
+        validator = this.validators[name] = {};
+        validator.fn = resolveAsset(this.dir.vm.$options, 'validators', name);
+      }
 
-      for (var validate in validates) {
-        var fn = resolveAsset(dir.vm.$options, 'validators', camelize(validate));
-        if (fn) {
-          ret[validate] = { arg: arg, fn: fn };
-        }
+      validator.arg = arg;
+      if (msg) {
+        validator.msg = msg;
       }
 
-      return ret;
-    }
-  }, {
-    key: 'updateValidate',
-    value: function updateValidate(name, arg, msg, fn) {
-      if (this.validates[name]) {
-        this.validates[name].arg = arg;
-        if (msg) {
-          this.validates[name].msg = msg;
-        }
-        if (fn) {
-          this.validates[name].fn = fn;
-        }
+      if (fn) {
+        validator.fn = fn;
       }
     }
   }, {
@@ -399,8 +386,8 @@ var Validation = (function () {
       var messages = Object.create(null);
       var valid = true;
 
-      each(this.validates, function (descriptor, name) {
-        var res = descriptor.fn(_this.el.value, descriptor.arg);
+      each(this.validators, function (descriptor, name) {
+        var res = descriptor.fn.call(_this.dir.vm, _this.el.value, descriptor.arg);
         if (!res) {
           valid = false;
           var msg = descriptor.msg;
@@ -467,26 +454,30 @@ function Validate (Vue) {
 
       if (_.isPlainObject(value)) {
         this.handleObject(value);
-      } else {
-        this.handleSingle(value);
+      } else if (Array.isArray(value)) {
+        this.handleArray(value);
       }
 
       this.validator.validate(this.validation);
     },
-    handleSingle: function handleSingle(value) {
-      var validateKey = Object.keys(this.validation.validates)[0];
-      this.validation.updateValidate(validateKey, value);
+    handleArray: function handleArray(value) {
+      var _this = this;
+
+      each(value, function (val) {
+        _this.validation.setValidation(val);
+      }, this);
     },
     handleObject: function handleObject(value) {
-      var _this = this;
+      var _this2 = this;
 
       each(value, function (val, key) {
         if (_.isPlainObject(val)) {
           if ('rule' in val) {
-            _this.validation.updateValidate(key, val.rule, 'message' in val ? val.message : null);
+            var msg = 'message' in val ? val.message : null;
+            _this2.validation.setValidation(key, val.rule, msg);
           }
         } else {
-          _this.validation.updateValidate(key, val);
+          _this2.validation.setValidation(key, val);
         }
       }, this);
     },
@@ -779,7 +770,7 @@ function plugin(Vue) {
   Validate(Vue);
 }
 
-plugin.version = '2.0.0-alpha.5';
+plugin.version = '2.0.0-alpha.7';
 
 if (typeof window !== 'undefined' && window.Vue) {
   window.Vue.use(plugin);
diff --git a/dist/vue-validator.js b/dist/vue-validator.js
index 4f0e72d..646a454 100644
--- a/dist/vue-validator.js
+++ b/dist/vue-validator.js
@@ -1,5 +1,5 @@
 /*!
- * vue-validator v2.0.0-alpha.6
+ * vue-validator v2.0.0-alpha.7
  * (c) 2015 kazuya kawaguchi
  * Released under the MIT License.
  */
@@ -338,40 +338,27 @@
       this.touched = false;
       this.dirty = false;
       this.modified = false;
-      this.validates = this._buildValidates(dir);
+      this.validators = Object.create(null);
     }
 
     babelHelpers.createClass(Validation, [{
-      key: '_buildValidates',
-      value: function _buildValidates(dir) {
-        var arg = arguments.length <= 1 || arguments[1] === undefined ? null : arguments[1];
-
+      key: 'setValidation',
+      value: function setValidation(name, arg, msg, fn) {
         var resolveAsset = exports$1.Vue.util.resolveAsset;
-        var camelize = exports$1.Vue.util.camelize;
 
-        var ret = Object.create(null);
-        var validates = dir.modifiers;
+        var validator = this.validators[name];
+        if (!validator) {
+          validator = this.validators[name] = {};
+          validator.fn = resolveAsset(this.dir.vm.$options, 'validators', name);
+        }
 
-        for (var validate in validates) {
-          var fn = resolveAsset(dir.vm.$options, 'validators', camelize(validate));
-          if (fn) {
-            ret[validate] = { arg: arg, fn: fn };
-          }
+        validator.arg = arg;
+        if (msg) {
+          validator.msg = msg;
         }
 
-        return ret;
-      }
-    }, {
-      key: 'updateValidate',
-      value: function updateValidate(name, arg, msg, fn) {
-        if (this.validates[name]) {
-          this.validates[name].arg = arg;
-          if (msg) {
-            this.validates[name].msg = msg;
-          }
-          if (fn) {
-            this.validates[name].fn = fn;
-          }
+        if (fn) {
+          validator.fn = fn;
         }
       }
     }, {
@@ -403,8 +390,8 @@
         var messages = Object.create(null);
         var valid = true;
 
-        each(this.validates, function (descriptor, name) {
-          var res = descriptor.fn(_this.el.value, descriptor.arg);
+        each(this.validators, function (descriptor, name) {
+          var res = descriptor.fn.call(_this.dir.vm, _this.el.value, descriptor.arg);
           if (!res) {
             valid = false;
             var msg = descriptor.msg;
@@ -471,26 +458,30 @@
 
         if (_.isPlainObject(value)) {
           this.handleObject(value);
-        } else {
-          this.handleSingle(value);
+        } else if (Array.isArray(value)) {
+          this.handleArray(value);
         }
 
         this.validator.validate(this.validation);
       },
-      handleSingle: function handleSingle(value) {
-        var validateKey = Object.keys(this.validation.validates)[0];
-        this.validation.updateValidate(validateKey, value);
+      handleArray: function handleArray(value) {
+        var _this = this;
+
+        each(value, function (val) {
+          _this.validation.setValidation(val);
+        }, this);
       },
       handleObject: function handleObject(value) {
-        var _this = this;
+        var _this2 = this;
 
         each(value, function (val, key) {
           if (_.isPlainObject(val)) {
             if ('rule' in val) {
-              _this.validation.updateValidate(key, val.rule, 'message' in val ? val.message : null);
+              var msg = 'message' in val ? val.message : null;
+              _this2.validation.setValidation(key, val.rule, msg);
             }
           } else {
-            _this.validation.updateValidate(key, val);
+            _this2.validation.setValidation(key, val);
           }
         }, this);
       },
@@ -783,7 +774,7 @@
     Validate(Vue);
   }
 
-  plugin.version = '2.0.0-alpha.5';
+  plugin.version = '2.0.0-alpha.7';
 
   if (typeof window !== 'undefined' && window.Vue) {
     window.Vue.use(plugin);
diff --git a/dist/vue-validator.min.js b/dist/vue-validator.min.js
index 7207075..dfd8357 100644
--- a/dist/vue-validator.min.js
+++ b/dist/vue-validator.min.js
@@ -1,6 +1,6 @@
 /*!
- * vue-validator v2.0.0-alpha.6
+ * vue-validator v2.0.0-alpha.7
  * (c) 2015 kazuya kawaguchi
  * Released under the MIT License.
  */
-!function(i,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):i.VueValidator=t()}(this,function(){"use strict";function i(i,t){window.console&&(console.warn("[vue-validator] "+i),t&&console.warn(t.stack))}function t(i){if(null===i)return!0;if(Array.isArray(i)){if(i.length>0)return!1;if(0===i.length)return!0}else if(y.Vue.util.isPlainObject(i))for(var t in i)if(y.Vue.util.hasOwn(i,t))return!1;return!0}function e(i,t,e){if(Array.isArray(i))for(var a=0;a<i.length;a++)t.call(e||i[a],i[a],a);else if(y.Vue.util.isPlainObject(i)){var n=y.Vue.util.hasOwn;for(var s in i)n(i,s)&&t.call(e||i[s],i[s],s)}}function a(i,t){var e=y.Vue.util.indexOf(i,t);return~e?i.splice(e,1):null}function n(i,t){var e=document.createEvent("HTMLEvents");e.initEvent(t,!0,!1),i.dispatchEvent(e)}function s(i){return Array.isArray(i)?i.length>0:"number"==typeof i||"function"==typeof i?!0:"boolean"==typeof i?i:"string"==typeof i?i.length>0:null!==i&&"object"===("undefined"==typeof i?"undefined":g["typeof"](i))?Object.keys(i).length>0:null===i||void 0===i?!1:void 0}function r(i,t){if("string"!=typeof t)return!1;var e=t.match(new RegExp("^/(.*?)/([gimy]*)$"));return e?new RegExp(e[1],e[2]).test(i):!1}function o(i,t){return"string"==typeof i&&h(t,10)&&i.length>=parseInt(t,10)}function l(i,t){return"string"==typeof i&&h(t,10)&&i.length<=parseInt(t,10)}function u(i,t){return!isNaN(+i)&&!isNaN(+t)&&+i>=+t}function d(i,t){return!isNaN(+i)&&!isNaN(+t)&&+t>=+i}function h(i){return/^(-?[1-9]\d*|0)$/.test(i)}function v(i){i.config._assetTypes.push("validator"),i.options.validators=_;var t=i.config.optionMergeStrategies;t&&(t.validators=t.methods),i.validator=function(t,e){return e?void(i.options.validators[t]=e):i.options.validators[t]}}function c(i){var t=i.prototype._init;i.prototype._init=function(i){this._validatorMaps||(this._validatorMaps=Object.create(null)),t.call(this,i)};var e=i.prototype._destroy;i.prototype._destroy=function(){e.apply(this,arguments),this._validatorMaps=null}}function f(t){var a=t.util;t.directive("validate",{params:["group"],bind:function(){var t=this.vm,e=t.$options._validator;if(!e)return void i("TODO: should be implemented error message");var n=this.validator=this.vm._validatorMaps[e],s=this.validation=new b(this);n.addValidation(s),this.params.group&&n.addGroupValidation(this.params.group,s),this.on("blur",a.bind(this.validation.listener,this.validation)),this.on("input",a.bind(this.validation.listener,this.validation))},update:function(i,t){i&&(a.isPlainObject(i)?this.handleObject(i):this.handleSingle(i),this.validator.validate(this.validation))},handleSingle:function(i){var t=Object.keys(this.validation.validates)[0];this.validation.updateValidate(t,i)},handleObject:function(i){var t=this;e(i,function(i,e){a.isPlainObject(i)?"rule"in i&&t.validation.updateValidate(e,i.rule,"message"in i?i.message:null):t.validation.updateValidate(e,i)},this)},unbind:function(){this.validator&&this.validation&&(this.params.group&&this.validator.removeGroupValidation(this.params.group,this.validation),this.validator.removeValidation(this.validation),this.validator=null,this.validation=null)}})}function p(t){var e=t.util,a=t.FragmentFactory,n=t.directive("if");t.elementDirective("validator",{params:["name","groups"],bind:function(){if(!this.params.name)return void i("TODO: should be implemented validator:bind name params nothing error");var t=this.validatorName="$"+this.params.name;if(!this.vm._validatorMaps)return void i("TODO: should be implemented error message");var a=[];this.params.groups&&(e.isArray(this.params.groups)?a=this.params.groups:e.isPlainObject(this.params.groups)||"string"!=typeof this.params.groups||a.push(this.params.groups));var n=this.validator=new V(t,this,a);n.enableReactive(),n.setupScope(),this.anchor=e.createAnchor("vue-validator"),e.replace(this.el,this.anchor),this.insert(t),this.vm.$on("hook:compiled",function(){n.validate()})},insert:function(i){e.extend(this.vm.$options,{_validator:i}),this.factory=new a(this.vm,this.el.innerHTML),n.insert.call(this)},unbind:function(){n.unbind.call(this),this.validator.disableReactive(),this.validatorName&&(this.validatorName=null,this.validator=null)}})}function m(t){arguments.length<=1||void 0===arguments[1]?{}:arguments[1];return m.installed?void i("already installed."):(y.Vue=t,v(t),c(t),p(t),void f(t))}var g={};g["typeof"]=function(i){return i&&"undefined"!=typeof Symbol&&i.constructor===Symbol?"symbol":typeof i},g.classCallCheck=function(i,t){if(!(i instanceof t))throw new TypeError("Cannot call a class as a function")},g.createClass=function(){function i(i,t){for(var e=0;e<t.length;e++){var a=t[e];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(i,a.key,a)}}return function(t,e,a){return e&&i(t.prototype,e),a&&i(t,a),t}}();var y={},_=Object.freeze({required:s,pattern:r,minlength:o,maxlength:l,min:u,max:d}),b=function(){function i(t){g.classCallCheck(this,i),this.model=t.arg,this.el=t.el,this.dir=t,this.init=t.el.value,this.touched=!1,this.dirty=!1,this.modified=!1,this.validates=this._buildValidates(t)}return g.createClass(i,[{key:"_buildValidates",value:function(i){var t=arguments.length<=1||void 0===arguments[1]?null:arguments[1],e=y.Vue.util.resolveAsset,a=y.Vue.util.camelize,n=Object.create(null),s=i.modifiers;for(var r in s){var o=e(i.vm.$options,"validators",a(r));o&&(n[r]={arg:t,fn:o})}return n}},{key:"updateValidate",value:function(i,t,e,a){this.validates[i]&&(this.validates[i].arg=t,e&&(this.validates[i].msg=e),a&&(this.validates[i].fn=a))}},{key:"listener",value:function(i){(!i.relatedTarget||"A"!==i.relatedTarget.tagName&&"BUTTON"!==i.relatedTarget.tagName)&&("blur"===i.type&&(this.touched=!0),this.dirty||this.el.value===this.init||(this.dirty=!0),this.modified=this.el.value!==this.init,this.dir.validator.validate())}},{key:"validate",value:function(){var i=this,a=y.Vue.util.extend,s=Object.create(null),r=Object.create(null),o=!0;e(this.validates,function(t,e){var a=t.fn(i.el.value,t.arg);if(!a){o=!1;var n=t.msg;n&&(r[e]="function"==typeof n?n():n)}s[e]=!a},this),n(this.el,o?"valid":"invalid");var l={valid:o,invalid:!o,touched:this.touched,untouched:!this.touched,dirty:this.dirty,pristine:!this.dirty,modified:this.modified};return t(r)||(l.messages=r),a(s,l),s}}]),i}(),V=function(){function i(t,a,n){var s=this;g.classCallCheck(this,i),this.name=t,this.scope=Object.create(null),this._dir=a,this._validations=[],this._groups=n,this._groupValidations=Object.create(null),e(n,function(i){s._groupValidations[i]=[]},this)}return g.createClass(i,[{key:"enableReactive",value:function(){y.Vue.util.defineReactive(this._dir.vm,this.name,this.scope),this._dir.vm._validatorMaps[this.name]=this}},{key:"disableReactive",value:function(){this._dir.vm._validatorMaps[this.name]=null,this._dir.vm[this.name]=null}},{key:"addValidation",value:function(i){this._validations.push(i)}},{key:"removeValidation",value:function(i){y.Vue.util.del(this.scope,i.model),a(this._validations,i)}},{key:"addGroupValidation",value:function(i,t){var e=this._groupValidations[i];e&&e.push(t)}},{key:"removeGroupValidation",value:function(i,t){var e=this._groupValidations[i];e&&a(e,t)}},{key:"validate",value:function(i){var t=this;e(this._validations,function(i,e){var a=i.validate();y.Vue.util.set(t.scope,i.model,a)},this)}},{key:"setupScope",value:function(){var i=this;this._defineProperties(this._validations,this.scope),e(this._groups,function(t){var e=i._groupValidations[t],a=Object.create(null);y.Vue.util.set(i.scope,t,a),i._defineProperties(e,a)},this)}},{key:"_defineProperties",value:function(i,t){var a=this,n=y.Vue.util.bind;e({valid:{fn:this._defineValid,arg:i},invalid:{fn:this._defineInvalid,arg:t},touched:{fn:this._defineTouched,arg:i},untouched:{fn:this._defineUntouched,arg:t},modified:{fn:this._defineModified,arg:i},dirty:{fn:this._defineDirty,arg:i},pristine:{fn:this._definePristine,arg:t},messages:{fn:this._defineMessages,arg:i}},function(i,e){Object.defineProperty(t,e,{enumerable:!0,configurable:!0,get:function(){return n(i.fn,a)(i.arg)}})},this)}},{key:"_walkValidations",value:function(i,t,a){var n=this,s=y.Vue.util.hasOwn,r=a;return e(i,function(i,e){if(r!==!a&&s(n.scope,i.model)){var o=n.scope[i.model];o&&o[t]===!a&&(r=!a)}},this),r}},{key:"_defineValid",value:function(i){return this._walkValidations(i,"valid",!0)}},{key:"_defineInvalid",value:function(i){return!i.valid}},{key:"_defineTouched",value:function(i){return this._walkValidations(i,"touched",!1)}},{key:"_defineUntouched",value:function(i){return!i.touched}},{key:"_defineModified",value:function(i){return this._walkValidations(i,"modified",!1)}},{key:"_defineDirty",value:function(i){return this._walkValidations(i,"dirty",!1)}},{key:"_definePristine",value:function(i){return!i.dirty}},{key:"_defineMessages",value:function(i){var a=this,n=y.Vue.util.extend,s=y.Vue.util.hasOwn,r=Object.create(null);return e(i,function(i,e){if(s(a.scope,i.model)){var o=a.scope[i.model];o&&!t(o.messages)&&(r[i.model]=n(Object.create(null),o.messages))}},this),t(r)?void 0:r}}]),i}();return m.version="2.0.0-alpha.5","undefined"!=typeof window&&window.Vue&&window.Vue.use(m),m});
\ No newline at end of file
+!function(i,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):i.VueValidator=t()}(this,function(){"use strict";function i(i,t){window.console&&(console.warn("[vue-validator] "+i),t&&console.warn(t.stack))}function t(i){if(null===i)return!0;if(Array.isArray(i)){if(i.length>0)return!1;if(0===i.length)return!0}else if(g.Vue.util.isPlainObject(i))for(var t in i)if(g.Vue.util.hasOwn(i,t))return!1;return!0}function e(i,t,e){if(Array.isArray(i))for(var a=0;a<i.length;a++)t.call(e||i[a],i[a],a);else if(g.Vue.util.isPlainObject(i)){var n=g.Vue.util.hasOwn;for(var r in i)n(i,r)&&t.call(e||i[r],i[r],r)}}function a(i,t){var e=g.Vue.util.indexOf(i,t);return~e?i.splice(e,1):null}function n(i,t){var e=document.createEvent("HTMLEvents");e.initEvent(t,!0,!1),i.dispatchEvent(e)}function r(i){return Array.isArray(i)?i.length>0:"number"==typeof i||"function"==typeof i?!0:"boolean"==typeof i?i:"string"==typeof i?i.length>0:null!==i&&"object"===("undefined"==typeof i?"undefined":y["typeof"](i))?Object.keys(i).length>0:null===i||void 0===i?!1:void 0}function s(i,t){if("string"!=typeof t)return!1;var e=t.match(new RegExp("^/(.*?)/([gimy]*)$"));return e?new RegExp(e[1],e[2]).test(i):!1}function o(i,t){return"string"==typeof i&&h(t,10)&&i.length>=parseInt(t,10)}function l(i,t){return"string"==typeof i&&h(t,10)&&i.length<=parseInt(t,10)}function u(i,t){return!isNaN(+i)&&!isNaN(+t)&&+i>=+t}function d(i,t){return!isNaN(+i)&&!isNaN(+t)&&+t>=+i}function h(i){return/^(-?[1-9]\d*|0)$/.test(i)}function c(i){i.config._assetTypes.push("validator"),i.options.validators=_;var t=i.config.optionMergeStrategies;t&&(t.validators=t.methods),i.validator=function(t,e){return e?void(i.options.validators[t]=e):i.options.validators[t]}}function v(i){var t=i.prototype._init;i.prototype._init=function(i){this._validatorMaps||(this._validatorMaps=Object.create(null)),t.call(this,i)};var e=i.prototype._destroy;i.prototype._destroy=function(){e.apply(this,arguments),this._validatorMaps=null}}function f(t){var a=t.util;t.directive("validate",{params:["group"],bind:function(){var t=this.vm,e=t.$options._validator;if(!e)return void i("TODO: should be implemented error message");var n=this.validator=this.vm._validatorMaps[e],r=this.validation=new b(this);n.addValidation(r),this.params.group&&n.addGroupValidation(this.params.group,r),this.on("blur",a.bind(this.validation.listener,this.validation)),this.on("input",a.bind(this.validation.listener,this.validation))},update:function(i,t){i&&(a.isPlainObject(i)?this.handleObject(i):Array.isArray(i)&&this.handleArray(i),this.validator.validate(this.validation))},handleArray:function(i){var t=this;e(i,function(i){t.validation.setValidation(i)},this)},handleObject:function(i){var t=this;e(i,function(i,e){if(a.isPlainObject(i)){if("rule"in i){var n="message"in i?i.message:null;t.validation.setValidation(e,i.rule,n)}}else t.validation.setValidation(e,i)},this)},unbind:function(){this.validator&&this.validation&&(this.params.group&&this.validator.removeGroupValidation(this.params.group,this.validation),this.validator.removeValidation(this.validation),this.validator=null,this.validation=null)}})}function p(t){var e=t.util,a=t.FragmentFactory,n=t.directive("if");t.elementDirective("validator",{params:["name","groups"],bind:function(){if(!this.params.name)return void i("TODO: should be implemented validator:bind name params nothing error");var t=this.validatorName="$"+this.params.name;if(!this.vm._validatorMaps)return void i("TODO: should be implemented error message");var a=[];this.params.groups&&(e.isArray(this.params.groups)?a=this.params.groups:e.isPlainObject(this.params.groups)||"string"!=typeof this.params.groups||a.push(this.params.groups));var n=this.validator=new V(t,this,a);n.enableReactive(),n.setupScope(),this.anchor=e.createAnchor("vue-validator"),e.replace(this.el,this.anchor),this.insert(t),this.vm.$on("hook:compiled",function(){n.validate()})},insert:function(i){e.extend(this.vm.$options,{_validator:i}),this.factory=new a(this.vm,this.el.innerHTML),n.insert.call(this)},unbind:function(){n.unbind.call(this),this.validator.disableReactive(),this.validatorName&&(this.validatorName=null,this.validator=null)}})}function m(t){arguments.length<=1||void 0===arguments[1]?{}:arguments[1];return m.installed?void i("already installed."):(g.Vue=t,c(t),v(t),p(t),void f(t))}var y={};y["typeof"]=function(i){return i&&"undefined"!=typeof Symbol&&i.constructor===Symbol?"symbol":typeof i},y.classCallCheck=function(i,t){if(!(i instanceof t))throw new TypeError("Cannot call a class as a function")},y.createClass=function(){function i(i,t){for(var e=0;e<t.length;e++){var a=t[e];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(i,a.key,a)}}return function(t,e,a){return e&&i(t.prototype,e),a&&i(t,a),t}}();var g={},_=Object.freeze({required:r,pattern:s,minlength:o,maxlength:l,min:u,max:d}),b=function(){function i(t){y.classCallCheck(this,i),this.model=t.arg,this.el=t.el,this.dir=t,this.init=t.el.value,this.touched=!1,this.dirty=!1,this.modified=!1,this.validators=Object.create(null)}return y.createClass(i,[{key:"setValidation",value:function(i,t,e,a){var n=g.Vue.util.resolveAsset,r=this.validators[i];r||(r=this.validators[i]={},r.fn=n(this.dir.vm.$options,"validators",i)),r.arg=t,e&&(r.msg=e),a&&(r.fn=a)}},{key:"listener",value:function(i){(!i.relatedTarget||"A"!==i.relatedTarget.tagName&&"BUTTON"!==i.relatedTarget.tagName)&&("blur"===i.type&&(this.touched=!0),this.dirty||this.el.value===this.init||(this.dirty=!0),this.modified=this.el.value!==this.init,this.dir.validator.validate())}},{key:"validate",value:function(){var i=this,a=g.Vue.util.extend,r=Object.create(null),s=Object.create(null),o=!0;e(this.validators,function(t,e){var a=t.fn.call(i.dir.vm,i.el.value,t.arg);if(!a){o=!1;var n=t.msg;n&&(s[e]="function"==typeof n?n():n)}r[e]=!a},this),n(this.el,o?"valid":"invalid");var l={valid:o,invalid:!o,touched:this.touched,untouched:!this.touched,dirty:this.dirty,pristine:!this.dirty,modified:this.modified};return t(s)||(l.messages=s),a(r,l),r}}]),i}(),V=function(){function i(t,a,n){var r=this;y.classCallCheck(this,i),this.name=t,this.scope=Object.create(null),this._dir=a,this._validations=[],this._groups=n,this._groupValidations=Object.create(null),e(n,function(i){r._groupValidations[i]=[]},this)}return y.createClass(i,[{key:"enableReactive",value:function(){g.Vue.util.defineReactive(this._dir.vm,this.name,this.scope),this._dir.vm._validatorMaps[this.name]=this}},{key:"disableReactive",value:function(){this._dir.vm._validatorMaps[this.name]=null,this._dir.vm[this.name]=null}},{key:"addValidation",value:function(i){this._validations.push(i)}},{key:"removeValidation",value:function(i){g.Vue.util.del(this.scope,i.model),a(this._validations,i)}},{key:"addGroupValidation",value:function(i,t){var e=this._groupValidations[i];e&&e.push(t)}},{key:"removeGroupValidation",value:function(i,t){var e=this._groupValidations[i];e&&a(e,t)}},{key:"validate",value:function(i){var t=this;e(this._validations,function(i,e){var a=i.validate();g.Vue.util.set(t.scope,i.model,a)},this)}},{key:"setupScope",value:function(){var i=this;this._defineProperties(this._validations,this.scope),e(this._groups,function(t){var e=i._groupValidations[t],a=Object.create(null);g.Vue.util.set(i.scope,t,a),i._defineProperties(e,a)},this)}},{key:"_defineProperties",value:function(i,t){var a=this,n=g.Vue.util.bind;e({valid:{fn:this._defineValid,arg:i},invalid:{fn:this._defineInvalid,arg:t},touched:{fn:this._defineTouched,arg:i},untouched:{fn:this._defineUntouched,arg:t},modified:{fn:this._defineModified,arg:i},dirty:{fn:this._defineDirty,arg:i},pristine:{fn:this._definePristine,arg:t},messages:{fn:this._defineMessages,arg:i}},function(i,e){Object.defineProperty(t,e,{enumerable:!0,configurable:!0,get:function(){return n(i.fn,a)(i.arg)}})},this)}},{key:"_walkValidations",value:function(i,t,a){var n=this,r=g.Vue.util.hasOwn,s=a;return e(i,function(i,e){if(s!==!a&&r(n.scope,i.model)){var o=n.scope[i.model];o&&o[t]===!a&&(s=!a)}},this),s}},{key:"_defineValid",value:function(i){return this._walkValidations(i,"valid",!0)}},{key:"_defineInvalid",value:function(i){return!i.valid}},{key:"_defineTouched",value:function(i){return this._walkValidations(i,"touched",!1)}},{key:"_defineUntouched",value:function(i){return!i.touched}},{key:"_defineModified",value:function(i){return this._walkValidations(i,"modified",!1)}},{key:"_defineDirty",value:function(i){return this._walkValidations(i,"dirty",!1)}},{key:"_definePristine",value:function(i){return!i.dirty}},{key:"_defineMessages",value:function(i){var a=this,n=g.Vue.util.extend,r=g.Vue.util.hasOwn,s=Object.create(null);return e(i,function(i,e){if(r(a.scope,i.model)){var o=a.scope[i.model];o&&!t(o.messages)&&(s[i.model]=n(Object.create(null),o.messages))}},this),t(s)?void 0:s}}]),i}();return m.version="2.0.0-alpha.7","undefined"!=typeof window&&window.Vue&&window.Vue.use(m),m});
\ No newline at end of file
diff --git a/package.json b/package.json
index 06977a3..6a52526 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-validator",
   "description": "Validator component for Vue.js",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-alpha.7",
   "author": {
     "name": "kazuya kawaguchi",
     "email": "kawakazu80@gmail.com"
@@ -18,13 +18,14 @@
     "babel-core": "^6.2.1",
     "babel-loader": "^6.2.0",
     "babel-plugin-espower": "^2.0.0",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.3.16",
     "babel-preset-es2015": "^6.1.18",
     "babel-preset-es2015-rollup": "^1.0.0",
     "commander": "^2.9.0",
     "cz-conventional-changelog": "^1.1.4",
     "eslint": "^1.10.2",
     "eslint-loader": "^1.1.1",
-    "espower-babel": "^3.3.0",
+    "espower-babel": "^4.0.0",
     "istanbul-instrumenter-loader": "^0.1.3",
     "json-loader": "^0.5.4",
     "karma": "^0.13.9",
@@ -77,15 +78,15 @@
     "browser": "VUE_VALIDATOR_TYPE=browser karma start config/karma.conf.js",
     "build": "node config/build.js",
     "ci": "npm run lint && npm run coverage && npm run coveralls && npm run sauce",
-    "clean": "rm -rf lib && rm -rf coverage && rm -rf dist",
+    "clean": "rm -rf coverage && rm -rf dist/*.*",
     "coolkids": "VUE_VALIDATOR_TYPE=sauce SAUCE=batch1 karma start config/karma.conf.js",
     "coverage": "VUE_VALIDATOR_TYPE=coverage karma start config/karma.conf.js",
     "coveralls": "VUE_VALIDATOR_TYPE=coveralls karma start config/karma.conf.js",
     "dev": "webpack-dev-server --quite --config config/webpack.dev.conf.js --host 0.0.0.0",
     "dev-test": "webpack-dev-server --quiet --config config/webpack.test.conf.js --host 0.0.0.0",
-    "e2e": "webpack-dev-server --quiet -h --config config/webpack.e2e.conf.js --content-base test/e2e & mocha -t 20000 --compilers js:espower-babel/guess test/e2e/test.js && kill $! || (kill $! && exit 1)",
+    "e2e": "webpack-dev-server --quiet --config config/webpack.e2e.conf.js & mocha -t 20000 --compilers js:espower-babel/guess test/e2e/test.js && kill $! || (kill $! && exit 1)",
     "ie": "VUE_VALIDATOR_TYPE=sauce SAUCE=batch2 karma start config/karma.conf.js",
-    "lint": "eslint src test/specs",
+    "lint": "eslint src config test/specs",
     "mobile": "VUE_VALIDATOR_TYPE=sauce SAUCE=batch3 karma start config/karma.conf.js",
     "sauce": "npm run coolkids && npm run ie && npm run mobile",
     "test": "npm run ci",
diff --git a/src/directives/validate.js b/src/directives/validate.js
index 69bdfe8..c403c86 100644
--- a/src/directives/validate.js
+++ b/src/directives/validate.js
@@ -37,26 +37,28 @@ export default function (Vue) {
 
       if (_.isPlainObject(value)) {
         this.handleObject(value)
-      } else {
-        this.handleSingle(value)
+      } else if (Array.isArray(value)) {
+        this.handleArray(value)
       }
 
       this.validator.validate(this.validation)
     },
 
-    handleSingle (value) {
-      let validateKey = Object.keys(this.validation.validates)[0]
-      this.validation.updateValidate(validateKey, value)
+    handleArray (value) {
+      each(value, (val) => {
+        this.validation.setValidation(val)
+      }, this)
     },
 
     handleObject (value) {
       each(value, (val, key) => {
         if (_.isPlainObject(val)) {
           if ('rule' in val) {
-            this.validation.updateValidate(key, val.rule, ('message' in val ? val.message : null))
+            let msg = 'message' in val ? val.message : null
+            this.validation.setValidation(key, val.rule, msg)
           }
         } else {
-          this.validation.updateValidate(key, val)
+          this.validation.setValidation(key, val)
         }
       }, this)
     },
diff --git a/src/index.js b/src/index.js
index 8834c66..ec20ca9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -26,7 +26,7 @@ function plugin (Vue, options = {}) {
   Validate(Vue)
 }
 
-plugin.version = '2.0.0-alpha.5'
+plugin.version = '2.0.0-alpha.7'
 
 export default plugin
 
diff --git a/src/validation.js b/src/validation.js
index 147b69b..8ba1a06 100644
--- a/src/validation.js
+++ b/src/validation.js
@@ -15,35 +15,25 @@ export default class Validation {
     this.touched = false
     this.dirty = false
     this.modified = false
-    this.validates = this._buildValidates(dir)
+    this.validators = Object.create(null)
   }
 
-  _buildValidates (dir, arg = null) {
+  setValidation (name, arg, msg, fn) {
     const resolveAsset = util.Vue.util.resolveAsset
-    const camelize = util.Vue.util.camelize
 
-    let ret = Object.create(null)
-    let validates = dir.modifiers
-
-    for (let validate in validates) {
-      let fn = resolveAsset(dir.vm.$options, 'validators', camelize(validate))
-      if (fn) {
-        ret[validate] = { arg: arg, fn: fn }
-      }
+    let validator = this.validators[name]
+    if (!validator) {
+      validator = this.validators[name] = {}
+      validator.fn = resolveAsset(this.dir.vm.$options, 'validators', name)
+    }
+    
+    validator.arg = arg
+    if (msg) {
+      validator.msg = msg
     }
 
-    return ret
-  }
-
-  updateValidate (name, arg, msg, fn) {
-    if (this.validates[name]) {
-      this.validates[name].arg = arg
-      if (msg) {
-        this.validates[name].msg = msg
-      }
-      if (fn) {
-        this.validates[name].fn = fn
-      }
+    if (fn) {
+      validator.fn = fn
     }
   }
 
@@ -72,8 +62,8 @@ export default class Validation {
     let messages = Object.create(null)
     let valid = true
 
-    each(this.validates, (descriptor, name) => {
-      let res = descriptor.fn(this.el.value, descriptor.arg)
+    each(this.validators, (descriptor, name) => {
+      let res = descriptor.fn.call(this.dir.vm, this.el.value, descriptor.arg)
       if (!res) {
         valid = false
         let msg = descriptor.msg
diff --git a/test/e2e/.babelrc b/test/e2e/.babelrc
new file mode 100644
index 0000000..6f20dd0
--- /dev/null
+++ b/test/e2e/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ["es2015"],
+  "plugins": ["transform-es2015-modules-commonjs"]
+}
diff --git a/test/e2e/helper.js b/test/e2e/helper.js
deleted file mode 100644
index a44907e..0000000
--- a/test/e2e/helper.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Import(s)
- */
-
-var pathResolve = require('path').resolve;
-var urlFormat = require('url').format;
-
-
-/**
- * Exports(s)
- */
-
-module.exports = {
-  resolve: resolve
-}
-
-
-function resolve (path) {
-  return urlFormat({
-    protocol: 'file',
-    slashes: true,
-    pathname: pathResolve(__dirname, path)
-  })
-}
diff --git a/test/e2e/index.html b/test/e2e/index.html
new file mode 100644
index 0000000..4e9861a
--- /dev/null
+++ b/test/e2e/index.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>registration</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <link rel="stylesheet" href="./css/bootstrap.min.css">
+    <style>
+      body { padding-top: 50px; padding-bottom: 50px; }
+    </style>
+    <script src="./js/jquery-2.1.3.min.js"></script>
+    <script src="./js/bootstrap.min.js"></script>
+  </head>
+  <body>
+    <div id="registration" class="container">
+      <validator name="validation">
+        <form class="form-horizontal" role="form">
+          <div id="username" 
+               class="form-group has-feedback" 
+               :class="{ 'has-success': $validation.username.valid, 'has-error': $validation.username.invalid }">
+            <label for="inputUsername" class="col-sm-2 control-label">Username</label>
+            <div class="col-sm-10">
+              <input type="text" 
+                     class="form-control" 
+                     id="inputUsername" 
+                     placeholder="Username" 
+                     aria-describedby="inputUsernameStatus" 
+                     v-validate:username="{ required: true, maxlength: 16 }">
+              <span id="inputUsernameIcon" 
+                    class="glyphicon form-control-feedback" 
+                    aria-hidden="true" 
+                    :class="{ 'glyphicon-remove': $validation.username.invalid, 'glyphicon-ok': $validation.username.valid }">
+              </span>
+              <span id="inputUsernameStatus" class="sr-only">
+                {{ $validation.username.valid ? '(success)' : '(error)' }}
+              </span>
+            </div>
+          </div>
+          <div id="email" 
+               class="form-group has-feedback" 
+               :class="{ 'has-success': $validation.email.valid, 'has-error': $validation.email.invalid }">
+            <label for="inputEmail" class="col-sm-2 control-label">Email</label>
+            <div class="col-sm-10">
+              <input type="text" 
+                     class="form-control" 
+                     id="inputEmail" 
+                     placeholder="Email" 
+                     aria-describedby="inputEmailStatus" 
+                     v-validate:email="['required', 'email']">
+              <span id="inputEmailIcon" 
+                    class="glyphicon form-control-feedback" 
+                    aria-hidden="true" 
+                    :class="{ 'glyphicon-remove': $validation.email.invalid, 'glyphicon-ok': $validation.email.valid }">
+              </span>
+              <span id="inputEmailStatus" class="sr-only">
+                {{ $validation.email.valid ? '(success)' : '(error)' }}
+              </span>
+            </div>
+          </div>
+          <div id="confirmEmail" 
+               class="form-group has-feedback" 
+               :class="{ 'has-success': $validation.confirmEmail.valid, 'has-error': $validation.confirmEmail.invalid }">
+            <label for="inputConfirmEmail" class="col-sm-2 control-label">Confirm Email</label>
+            <div class="col-sm-10">
+              <input type="text" 
+                     class="form-control" 
+                     id="inputConfirmEmail" 
+                     placeholder="Confirm email" 
+                     aria-describedby="inputConfirmEmailStatus" 
+                     v-validate:confirmEmail="{ required: true, email: true, same: 'email' }">
+              <span id="inputConfirmEmailIcon" 
+                    class="glyphicon form-control-feedback" 
+                    aria-hidden="true" 
+                    :class="{ 'glyphicon-remove': $validation.confirmEmail.invalid, 'glyphicon-ok': $validation.confirmEmail.valid }">
+              </span>
+              <span id="inputConfirmEmailStatus" class="sr-only">
+                {{ $validation.confirmEmail.valid ? '(success)' : '(error)' }}
+              </span>
+            </div>
+          </div>
+          <div id="password" 
+               class="form-group has-feedback" 
+               :class="{ 'has-success': $validation.password.valid, 'has-error': $validation.password.invalid }">
+            <label for="inputPassword" class="col-sm-2 control-label">Password</label>
+            <div class="col-sm-10">
+              <input type="password" 
+                     class="form-control" 
+                     id="inputPassword" 
+                     placeholder="Password" 
+                     aria-describedby="inputPasswordStatus" 
+                     v-validate:password="{ required: true, minlength: 8, maxlength: 16 }">
+              <span id="inputPasswordIcon" 
+                    class="glyphicon form-control-feedback" 
+                    aria-hidden="true" 
+                    :class="{ 'glyphicon-remove': $validation.password.invalid, 'glyphicon-ok': $validation.password.valid }">
+              </span>
+              <span id="inputPasswordStatus" class="sr-only">
+                {{ $validation.password.valid ? '(success)' : '(error)' }}
+              </span>
+            </div>
+          </div>
+          <div class="form-group">
+            <div class="col-sm-offset-2 col-sm-10">
+              <button type="submit" 
+                      class="btn btn-large btn-primary btn-block" 
+                      :class="{ disabled: $validation.invalid }">Join</button>
+            </div>
+          </div>
+        </form>
+      </validator>
+    </div>
+    <script src="e2e.js"></script>
+  </body>
+</html>
diff --git a/test/e2e/index.js b/test/e2e/index.js
new file mode 100644
index 0000000..c870173
--- /dev/null
+++ b/test/e2e/index.js
@@ -0,0 +1,22 @@
+import Vue from 'vue'
+import plugin from '../../src/index'
+
+Vue.use(plugin)
+
+// register custom validator
+Vue.validator('email', (val) => {
+  return /^(([^<>()[\]\\.,;:\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,}))$/.test(val)
+})
+
+Vue.validator('same', (val, prop) => {
+  return val == this.$get(prop)
+})
+
+new Vue({
+  data: {
+    username: '',
+    email: '',
+    confirmEmail: '',
+    password: ''
+  }
+}).$mount('#registration')
diff --git a/test/e2e/registration.html b/test/e2e/registration.html
deleted file mode 100644
index 5cafd53..0000000
--- a/test/e2e/registration.html
+++ /dev/null
@@ -1,111 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>registration</title>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <link rel="stylesheet" href="./css/bootstrap.min.css">
-    <style>
-      body { padding-top: 50px; padding-bottom: 50px; }
-    </style>
-    <script src="./js/jquery-2.1.3.min.js"></script>
-    <script src="./js/bootstrap.min.js"></script>
-    <script src="../../node_modules/vue/dist/vue.js"></script>
-    <script src="../../dist/vue-validator.js"></script>
-  </head>
-  <body>
-    <div id="registration" class="container">
-      <form class="form-horizontal" role="form">
-        <div id="username" class="form-group has-feedback" 
-          v-class="has-success: validation.username.valid, has-error: validation.username.invalid">
-          <label for="inputUsername" class="col-sm-2 control-label">Username</label>
-          <div class="col-sm-10">
-            <input type="text" class="form-control" id="inputUsername" 
-              placeholder="Username" aria-describedby="inputUsernameStatus" 
-              v-model="username" v-validate="required, maxLength: 16">
-            <span id="inputUsernameIcon" class="glyphicon form-control-feedback" aria-hidden="true" 
-              v-class="glyphicon-remove: validation.username.invalid, glyphicon-ok: validation.username.valid">
-            </span>
-            <span id="inputUsernameStatus" class="sr-only" 
-              v-text="validation.username.valid ? '(success)' : '(error)'"></span>
-          </div>
-        </div>
-        <div id="email" class="form-group has-feedback" 
-          v-class="has-success: validation.email.valid, has-error: validation.email.invalid">
-          <label for="inputEmail" class="col-sm-2 control-label">Email</label>
-          <div class="col-sm-10">
-            <input type="text" class="form-control" id="inputEmail" 
-              placeholder="Email" aria-describedby="inputEmailStatus" 
-              v-model="email" v-validate="required, email">
-            <span id="inputEmailIcon" class="glyphicon form-control-feedback" aria-hidden="true" 
-              v-class="glyphicon-remove: validation.email.invalid, glyphicon-ok: validation.email.valid">
-            </span>
-            <span id="inputEmailStatus" class="sr-only" 
-              v-text="validation.email.valid ? '(success)' : '(error)'"></span>
-          </div>
-        </div>
-        <div id="confirmEmail" class="form-group has-feedback"
-          v-class="has-success: validation.confirmEmail.valid, has-error: validation.confirmEmail.invalid">
-          <label for="inputConfirmEmail" class="col-sm-2 control-label">Confirm Email</label>
-          <div class="col-sm-10">
-            <input type="text" class="form-control" id="inputConfirmEmail" 
-              placeholder="Confirm email" aria-describedby="inputConfirmEmailStatus" 
-              v-model="confirmEmail" v-validate="required, email, same: 'email'">
-            <span id="inputConfirmEmailIcon" class="glyphicon form-control-feedback" aria-hidden="true" 
-              v-class="glyphicon-remove: validation.confirmEmail.invalid, glyphicon-ok: validation.confirmEmail.valid">
-            </span>
-            <span id="inputConfirmEmailStatus" class="sr-only" 
-              v-text="validation.confirmEmail.valid ? '(success)' : '(error)'"></span>
-          </div>
-        </div>
-        <div id="password" class="form-group has-feedback"
-          v-class="has-success: validation.password.valid, has-error: validation.password.invalid">
-          <label for="inputPassword" class="col-sm-2 control-label">Password</label>
-          <div class="col-sm-10">
-            <input type="password" class="form-control" id="inputPassword" 
-              placeholder="Password" aria-describedby="inputPasswordStatus" 
-              v-model="password" v-validate="required, minLength: 8, maxLength: 16">
-            <span id="inputPasswordIcon" class="glyphicon form-control-feedback" aria-hidden="true" 
-              v-class="glyphicon-remove: validation.password.invalid, glyphicon-ok: validation.password.valid">
-            </span>
-            <span id="inputPasswordStatus" class="sr-only" 
-              v-text="validation.password.valid ? '(success)' : '(error)'"></span>
-          </div>
-        </div>
-        <div class="form-group">
-          <div class="col-sm-offset-2 col-sm-10">
-            <button type="submit" class="btn btn-large btn-primary btn-block" 
-              v-class="disabled: invalid">Join</button>
-          </div>
-        </div>
-      </form>
-    </div>
-    <script>
-      (function () {
-        Vue.use(window['vue-validator'])
-
-        var registration = {
-          data: {
-            username: '',
-            email: '',
-            confirmEmail: '',
-            password: ''
-          },
-
-          validator: {
-            validates: {
-              email: function (val) {
-                return /^(([^<>()[\]\\.,;:\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,}))$/.test(val)
-              },
-
-              same: function (val, prop) {
-                return val === this.$get(prop)
-              }
-            }
-          }
-        }
-
-        new Vue(registration).$mount('#registration')
-      })()
-    </script>
-  </body>
-</html>
diff --git a/test/e2e/registration.js b/test/e2e/test.js
similarity index 86%
rename from test/e2e/registration.js
rename to test/e2e/test.js
index e3afa58..c20524d 100644
--- a/test/e2e/registration.js
+++ b/test/e2e/test.js
@@ -1,46 +1,38 @@
-/**
- * Import(s)
- */
+import assert from 'power-assert'
+import Nightmare from 'nightmare'
+const url = 'http://localhost:' + (process.env.PORT || 8080)
 
-var Nightmare = require('nightmare')
-var assert = require('power-assert')
-var resolve = require('./helper').resolve
 
+describe('registration', () => {
 
-/**
- * Test(s)
- */
-
-describe('registration', function () {
-
-  var expectOK = function (ret) {
+  let expectOK = (ret) => {
     assert(ret)
   }
-  var expectTextError = function (text) {
+  let expectTextError = (text) => {
     assert(text === '(error)')
   }
-  var expectTextSuccess = function (text) {
+  let expectTextSuccess = (text) => {
     assert(text === '(success)')
   }
-  var getUsernameStatus = function () {
+  let getUsernameStatus = () => {
     return document.querySelector('#inputUsernameStatus').innerText
   }
-  var getEmailStatus = function () {
+  let getEmailStatus = () => {
     return document.querySelector('#inputEmailStatus').innerText
   }
-  var getConfirmEmailStatus = function () {
+  let getConfirmEmailStatus = () => {
     return document.querySelector('#inputConfirmEmailStatus').innerText
   }
-  var getPasswordStatus = function () {
+  let getPasswordStatus = () => {
     return document.querySelector('#inputPasswordStatus').innerText
   }
 
   describe('first loaded page', function () {
     this.timeout(20000)
 
-    it('should be invalid', function (done) {
+    it('should be invalid', (done) => {
       new Nightmare()
-        .goto(resolve('./registration.html'))
+        .goto(url)
         .exists('#username .has-error', expectOK)
         .exists('#inputUsernameIcon .glyphicon-remove', expectOK)
         .evaluate(getUsernameStatus, expectTextError)
@@ -62,9 +54,9 @@ describe('registration', function () {
   describe('input valid username', function () {
     this.timeout(20000)
 
-    it('should be valid', function (done) {
+    it('should be valid', (done) => {
       new Nightmare()
-        .goto(resolve('./registration.html'))
+        .goto(url)
         .type('#inputUsername', 'kazupon')
         .wait('#inputUsername')
         .exists('#username .has-success', expectOK) // success
@@ -88,9 +80,9 @@ describe('registration', function () {
   describe('input valid email', function () {
     this.timeout(20000)
 
-    it('should be valid', function (done) {
+    it('should be valid', (done) => {
       new Nightmare()
-        .goto(resolve('./registration.html'))
+        .goto(url)
         .type('#inputEmail', 'foo@domain.com')
         .wait('#inputEmail')
         .exists('#username .has-error', expectOK)
@@ -114,9 +106,9 @@ describe('registration', function () {
   describe('input valid confirm email', function () {
     this.timeout(20000)
 
-    it('should be valid', function (done) {
+    it('should be valid', (done) => {
       new Nightmare()
-        .goto(resolve('./registration.html'))
+        .goto(url)
         .type('#inputEmail', 'foo@domain.com')
         .wait('#inputEmail')
         .type('#inputConfirmEmail', 'foo@domain.com')
@@ -142,7 +134,7 @@ describe('registration', function () {
   describe('input valid password', function () {
     this.timeout(20000)
 
-    it('should be valid', function (done) {
+    it('should be valid', (done) => {
       new Nightmare()
         .goto(resolve('./registration.html'))
         .type('#inputPassword', 'xxxxxxxxx')
@@ -168,9 +160,9 @@ describe('registration', function () {
   describe('input valid fileds', function () {
     this.timeout(20000)
 
-    it('join button should be enabled', function (done) {
+    it('join button should be enabled', (done) => {
       new Nightmare()
-        .goto(resolve('./registration.html'))
+        .goto(url)
         .type('#inputUsername', 'kazupon')
         .wait('#inputUsername')
         .type('#inputEmail', 'foo@domain.com')
diff --git a/test/specs/custom.js b/test/specs/custom.js
index 60a63e0..04565df 100644
--- a/test/specs/custom.js
+++ b/test/specs/custom.js
@@ -20,7 +20,7 @@ describe('custom', () => {
       el.innerHTML = 
         '<validator name="validator1">' +
         '<form novalidate>' +
-        '<input type="text" value="hi" v-validate:field1.numeric>' +
+        '<input type="text" value="hi" v-validate:field1="{ numeric: true }">' +
         '</form>' +
         '</validator>'
       vm = new Vue({
diff --git a/test/specs/directives/validate.js b/test/specs/directives/validate.js
index 61b4c1b..f9d9678 100644
--- a/test/specs/directives/validate.js
+++ b/test/specs/directives/validate.js
@@ -16,7 +16,7 @@ describe('validate directive', () => {
         el: el,
         template: '<validator name="validator1">' +
           '<form novalidate>' +
-          '<input type="text" v-validate:field1.required>' +
+          '<input type="text" v-validate:field1="{ required: true }">' +
           '</form>' +
           '</validator>'
       })
@@ -46,7 +46,7 @@ describe('validate directive', () => {
         },
         template: '<validator name="validator1">' +
           '<form novalidate>' +
-          '<input type="text" v-show="hidden" v-validate:field1.min.max="{ min: 0, max: 10 }">' +
+          '<input type="text" v-show="hidden" v-validate:field1="{ min: 0, max: 10 }">' +
           '</form>' +
           '</validator>'
       })
@@ -123,7 +123,7 @@ describe('validate directive', () => {
         },
         template: '<validator name="validator1">' +
           '<form novalidate>' +
-          '<input type="text" v-if="hidden" v-validate:field1.minlength.maxlength="{ minlength: 0, maxlength: 10 }">' +
+          '<input type="text" v-if="hidden" v-validate:field1="{ minlength: 0, maxlength: 10 }">' +
           '</form>' +
           '</validator>'
       })
diff --git a/test/specs/dirty.js b/test/specs/dirty.js
index a1a96f8..a5e6bfa 100644
--- a/test/specs/dirty.js
+++ b/test/specs/dirty.js
@@ -11,8 +11,8 @@ describe('dirty', () => {
     el.innerHTML = 
       '<validator name="validator1">' +
       '<form novalidate>' +
-      '<input type="text" v-validate:field1.required>' +
-      '<input type="text" v-validate:field2.required>' +
+      '<input type="text" v-validate:field1="{ required: true }">' +
+      '<input type="text" v-validate:field2="{ required: true }">' +
       '</form>' +
       '</validator>'
     vm = new Vue({
diff --git a/test/specs/event.js b/test/specs/event.js
index ba76654..fad2e23 100644
--- a/test/specs/event.js
+++ b/test/specs/event.js
@@ -15,7 +15,7 @@ describe('event', () => {
     it('should be occured event', (done) => {
       el.innerHTML = 
         '<validator name="validator1">' +
-        '<input type="text" @valid="onValid" v-validate:field1.required>' +
+        '<input type="text" @valid="onValid" v-validate:field1="{ required: true }">' +
         '</validator>'
       vm = new Vue({
         el: el,
@@ -38,7 +38,7 @@ describe('event', () => {
     it('should be occured event', (done) => {
       el.innerHTML = 
         '<validator name="validator1">' +
-        '<input type="text" value="hello" @invalid="onInValid" v-validate:field1.required>' +
+        '<input type="text" value="hello" @invalid="onInValid" v-validate:field1="{ required: true }">' +
         '</validator>'
       vm = new Vue({
         el: el,
diff --git a/test/specs/group.js b/test/specs/group.js
index bdd6a92..39e5b06 100644
--- a/test/specs/group.js
+++ b/test/specs/group.js
@@ -9,11 +9,11 @@ describe('group', () => {
   beforeEach((done) => {
     el = document.createElement('div')
     el.innerHTML = 
-      '<validator :groups="[\'group1\', \'group2\']"name="validator1">' +
-      '<input type="text" group="group1" v-validate:field1.pattern="\'/foo/\'">' +
-      '<input type="text" group="group1" value="hoge" v-validate:field2.required>' +
-      '<input type="text" group="group2" v-validate:field3.pattern="\'/bar/\'">' +
-      '<input type="text" group="group2" v-validate:field4.pattern="\'/piyo/\'">' +
+      '<validator :groups="[\'group1\', \'group2\']" name="validator1">' +
+      '<input type="text" group="group1" v-validate:field1="{ pattern: \'/foo/\' }">' +
+      '<input type="text" group="group1" value="hoge" v-validate:field2="{ required: true }">' +
+      '<input type="text" group="group2" v-validate:field3="{ pattern: \'/bar/\' }">' +
+      '<input type="text" group="group2" v-validate:field4="{ pattern: \'/piyo/\' }">' +
       '</validator>'
     vm = new Vue({
       el: el
diff --git a/test/specs/invalid.js b/test/specs/invalid.js
index 7f45f4d..e9f5b28 100644
--- a/test/specs/invalid.js
+++ b/test/specs/invalid.js
@@ -11,8 +11,8 @@ describe('invalid', () => {
     el.innerHTML = 
       '<validator name="validator1">' +
       '<form novalidate>' +
-      '<input type="text" v-validate:field1.required.maxlength="{ maxlength: 3 }">' +
-      '<input type="text" value="foo" v-validate:field2.required.minlength="{ minlength: 1 }">' +
+      '<input type="text" v-validate:field1="{ required: true, maxlength: 3 }">' +
+      '<input type="text" value="foo" v-validate:field2="{ required: true, minlength: 1 }">' +
       '</form>' +
       '</validator>'
     vm = new Vue({
diff --git a/test/specs/messages.js b/test/specs/messages.js
index 46247fb..44b6f60 100644
--- a/test/specs/messages.js
+++ b/test/specs/messages.js
@@ -9,13 +9,13 @@ describe('messages', () => {
   beforeEach((done) => {
     el = document.createElement('div')
     el.innerHTML = 
-      '<validator :groups="[\'group1\', \'group2\']"name="validation">' +
-      '<input type="text" group="group1" v-validate:field1.pattern="field1">' +
-      '<input type="text" group="group1" v-validate:field2.required="field2">' +
-      '<input type="text" group="group2" v-validate:field3.max="field3">' +
-      '<input type="text" group="group2" v-validate:field4.maxlength="field4">' +
-      '<input type="text" group="group1" value="0" v-validate:field5.min="{ min: { rule :1, message: message1 } }">' +
-      '<input type="text" group="group2" value="h" v-validate:field6.minlength="{ minlength: { rule: 4, message: onMessage2 } }">' +
+      '<validator :groups="[\'group1\', \'group2\']" name="validation">' +
+      '<input type="text" group="group1" v-validate:field1="field1">' +
+      '<input type="text" group="group1" v-validate:field2="field2">' +
+      '<input type="text" group="group2" v-validate:field3="field3">' +
+      '<input type="text" group="group2" v-validate:field4="field4">' +
+      '<input type="text" group="group1" value="0" v-validate:field5="{ min: { rule :1, message: message1 } }">' +
+      '<input type="text" group="group2" value="h" v-validate:field6="{ minlength: { rule: 4, message: onMessage2 } }">' +
       '<ul><li v-for="msg in $validation.messages">' +
       '<div v-for="val in msg"><p>{{$key}}:{{val}}</p></div>' +
       '</li></ul>' +
diff --git a/test/specs/modified.js b/test/specs/modified.js
index 65114f8..fc2b788 100644
--- a/test/specs/modified.js
+++ b/test/specs/modified.js
@@ -11,8 +11,8 @@ describe('modified', () => {
     el.innerHTML = 
       '<validator name="validator1">' +
       '<form novalidate>' +
-      '<input type="text" v-validate:field1.required>' +
-      '<input type="text" v-validate:field2.required>' +
+      '<input type="text" v-validate:field1="{ required: true }">' +
+      '<input type="text" v-validate:field2="{ required: true }">' +
       '</form>' +
       '</validator>'
     vm = new Vue({
diff --git a/test/specs/multiple.js b/test/specs/multiple.js
index 22ec381..928497a 100644
--- a/test/specs/multiple.js
+++ b/test/specs/multiple.js
@@ -10,10 +10,10 @@ describe('multiple', () => {
     el = document.createElement('div')
     el.innerHTML = 
       '<validator name="validator1">' +
-      '<input type="text" v-validate:field1.required>' +
+      '<input type="text" v-validate:field1="{ required: true }">' +
       '</validator>' +
       '<validator name="validator2">' +
-      '<input type="text" v-validate:field1.required>' +
+      '<input type="text" v-validate:field1="{ required: true }">' +
       '</validator>' 
     vm = new Vue({
       el: el
diff --git a/test/specs/pristine.js b/test/specs/pristine.js
index fcb89bd..27b197b 100644
--- a/test/specs/pristine.js
+++ b/test/specs/pristine.js
@@ -11,8 +11,8 @@ describe('pristine', () => {
     el.innerHTML = 
       '<validator name="validator1">' +
       '<form novalidate>' +
-      '<input type="text" v-validate:field1.required>' +
-      '<input type="text" v-validate:field2.required>' +
+      '<input type="text" v-validate:field1="{ required: true }">' +
+      '<input type="text" v-validate:field2="{ required: true }">' +
       '</form>' +
       '</validator>'
     vm = new Vue({
diff --git a/test/specs/syntax.js b/test/specs/syntax.js
index 9062f0b..5578422 100644
--- a/test/specs/syntax.js
+++ b/test/specs/syntax.js
@@ -11,200 +11,187 @@ describe('syntax', () => {
   })
 
 
-  describe('simple', () => {
-    context('static', () => {
+  context('simple', () => {
+    beforeEach((done) => {
+      el.innerHTML = 
+        '<validator name="validator1">' +
+        '<form novalidate>' +
+        '<input type="text" v-validate:field1="{ minlength: 2 }">' +
+        '</form>' +
+        '</validator>'
+      vm = new Vue({
+        el: el
+      })
+      vm.$nextTick(done)
+    })
+
+    it('should be validated', (done) => {
+      // default
+      assert(vm.$validator1.field1.minlength === true)
+
+      // change input value
+      let input = el.getElementsByTagName('input')[0]
+      input.value = 'foo'
+      trigger(input, 'input')
+      vm.$nextTick(() => {
+        assert(vm.$validator1.field1.minlength === false)
+        done()
+      })
+    })
+  })
+
+  
+  context('array', () => {
+    beforeEach((done) => {
+      el.innerHTML = 
+        '<validator name="validator1">' +
+        '<form novalidate>' +
+        '<input type="text" v-validate:field1="[\'required\']">' +
+        '</form>' +
+        '</validator>'
+      vm = new Vue({
+        el: el
+      })
+      vm.$nextTick(done)
+    })
+
+    it('should be validated', (done) => {
+      // default
+      assert(vm.$validator1.field1.required === true)
+
+      // change input value
+      let input = el.getElementsByTagName('input')[0]
+      input.value = 'foo'
+      trigger(input, 'input')
+      vm.$nextTick(() => {
+        assert(vm.$validator1.field1.required === false)
+        done()
+      })
+    })
+  })
+
+
+  context('strict', () => {
+    beforeEach((done) => {
+      el.innerHTML = 
+        '<validator name="validator1">' +
+        '<form novalidate>' +
+        '<input type="text" value="foo" v-validate:field1="{ minlength: { rule: 2 }, maxlength: { rule: 5 } }">' +
+        '</form>' +
+        '</validator>'
+      vm = new Vue({
+        el: el
+      })
+      vm.$nextTick(done)
+    })
+    
+    it('should be validated', (done) => {
+      // default
+      assert(vm.$validator1.field1.minlength === false)
+      assert(vm.$validator1.field1.maxlength === false)
+
+      // change input value
+      let input = el.getElementsByTagName('input')[0]
+      input.value = 'h'
+      trigger(input, 'input')
+      vm.$nextTick(() => {
+        assert(vm.$validator1.field1.minlength === true)
+        assert(vm.$validator1.field1.maxlength === false)
+
+        input.value = 'hi kazupon'
+        trigger(input, 'input')
+        vm.$nextTick(() => {
+          assert(vm.$validator1.field1.minlength === false)
+          assert(vm.$validator1.field1.maxlength === true)
+          done()
+        })
+      })
+    })
+  })
+
+
+  context('binding', () => {
+    context('primitive', () => {
       beforeEach((done) => {
         el.innerHTML = 
           '<validator name="validator1">' +
           '<form novalidate>' +
-          '<input type="text" v-validate:field1.minlength="2">' +
+          '<input type="text" value="0" v-validate:field1="{ max: number }">' +
           '</form>' +
           '</validator>'
         vm = new Vue({
-          el: el
+          el: el,
+          data: { number: 10 }
         })
         vm.$nextTick(done)
       })
 
       it('should be validated', (done) => {
         // default
-        assert(vm.$validator1.field1.minlength === true)
+        assert(vm.$validator1.field1.max === false)
 
         // change input value
         let input = el.getElementsByTagName('input')[0]
-        input.value = 'foo'
+        input.value = '11'
         trigger(input, 'input')
         vm.$nextTick(() => {
-          assert(vm.$validator1.field1.minlength === false)
+          assert(vm.$validator1.field1.max === true)
           done()
         })
       })
     })
 
-    context('binding', () => {
-      context('primitive', () => {
-        beforeEach((done) => {
-          el.innerHTML = 
-            '<validator name="validator1">' +
-            '<form novalidate>' +
-            '<input type="text" value="0" v-validate:field1.max="number">' +
-            '</form>' +
-            '</validator>'
-          vm = new Vue({
-            el: el,
-            data: { number: 10 }
-          })
-          vm.$nextTick(done)
-        })
-
-        it('should be validated', (done) => {
-          // default
-          assert(vm.$validator1.field1.max === false)
-
-          // change input value
-          let input = el.getElementsByTagName('input')[0]
-          input.value = '11'
-          trigger(input, 'input')
-          vm.$nextTick(() => {
-            assert(vm.$validator1.field1.max === true)
-            done()
-          })
-        })
-      })
-
-      context('function', () => {
-        beforeEach((done) => {
-          el.innerHTML = 
-            '<validator name="validator1">' +
-            '<form novalidate>' +
-            '<input type="text" value="5" v-validate:field1.max="getMax(condition)">' +
-            '</form>' +
-            '</validator>'
-          vm = new Vue({
-            el: el,
-            data: { condition: '' },
-            methods: {
-              getMax (condition) {
-                let ret = 0
-                switch (condition) {
-                  case 'condition1':
-                    ret = 5
-                    break
-                  default:
-                    ret = 10
-                    break
-                }
-                return ret
+    context('function', () => {
+      beforeEach((done) => {
+        el.innerHTML = 
+          '<validator name="validator1">' +
+          '<form novalidate>' +
+          '<input type="text" value="5" v-validate:field1="{ max: getMax(condition) }">' +
+          '</form>' +
+          '</validator>'
+        vm = new Vue({
+          el: el,
+          data: { condition: '' },
+          methods: {
+            getMax (condition) {
+              let ret = 0
+              switch (condition) {
+                case 'condition1':
+                  ret = 5
+                  break
+                default:
+                  ret = 10
+                  break
               }
+              return ret
             }
-          })
-          vm.$nextTick(done)
-        })
-
-        it('should be validated', (done) => {
-          // default
-          assert(vm.$validator1.field1.max === false)
-
-          // change input value
-          let input = el.getElementsByTagName('input')[0]
-          vm.condition = 'condition1'
-          input.value = '11'
-          trigger(input, 'input')
-          vm.$nextTick(() => {
-            assert(vm.$validator1.field1.max === true)
-            done()
-          })
+          }
         })
+        vm.$nextTick(done)
       })
-    })
-  })
-
-
-  describe('object', () => {
-    context('static', () => {
-      context('loose', () => {
-        beforeEach((done) => {
-          el.innerHTML = 
-            '<validator name="validator1">' +
-            '<form novalidate>' +
-            '<input type="text" value="3" v-validate:field1.min.max="{ min: 2, max: 5 }">' +
-            '</form>' +
-            '</validator>'
-          vm = new Vue({
-            el: el
-          })
-          vm.$nextTick(done)
-        })
 
-        it('should be validated', (done) => {
-          // default
-          assert(vm.$validator1.field1.min === false)
-          assert(vm.$validator1.field1.max === false)
-
-          // change input value
-          let input = el.getElementsByTagName('input')[0]
-          input.value = '0'
-          trigger(input, 'input')
-          vm.$nextTick(() => {
-            assert(vm.$validator1.field1.min === true)
-            assert(vm.$validator1.field1.max === false)
-
-            input.value = '6'
-            trigger(input, 'input')
-            vm.$nextTick(() => {
-              assert(vm.$validator1.field1.min === false)
-              assert(vm.$validator1.field1.max === true)
-              done()
-            })
-          })
-        })
-      })
+      it('should be validated', (done) => {
+        // default
+        assert(vm.$validator1.field1.max === false)
 
-      context('strict', () => {
-        beforeEach((done) => {
-          el.innerHTML = 
-            '<validator name="validator1">' +
-            '<form novalidate>' +
-            '<input type="text" value="foo" v-validate:field1.minlength.maxlength="{ minlength: { rule: 2 }, maxlength: { rule: 5 } }">' +
-            '</form>' +
-            '</validator>'
-          vm = new Vue({
-            el: el
-          })
-          vm.$nextTick(done)
-        })
-        
-        it('should be validated', (done) => {
-          // default
-          assert(vm.$validator1.field1.minlength === false)
-          assert(vm.$validator1.field1.maxlength === false)
-
-          // change input value
-          let input = el.getElementsByTagName('input')[0]
-          input.value = 'h'
-          trigger(input, 'input')
-          vm.$nextTick(() => {
-            assert(vm.$validator1.field1.minlength === true)
-            assert(vm.$validator1.field1.maxlength === false)
-
-            input.value = 'hi kazupon'
-            trigger(input, 'input')
-            vm.$nextTick(() => {
-              assert(vm.$validator1.field1.minlength === false)
-              assert(vm.$validator1.field1.maxlength === true)
-              done()
-            })
-          })
+        // change input value
+        let input = el.getElementsByTagName('input')[0]
+        vm.condition = 'condition1'
+        input.value = '11'
+        trigger(input, 'input')
+        vm.$nextTick(() => {
+          assert(vm.$validator1.field1.max === true)
+          done()
         })
       })
     })
 
-    context('binding', () => {
+    context('object', () => {
       beforeEach((done) => {
         el.innerHTML = 
           '<validator name="validator1">' +
           '<form novalidate>' +
-          '<input type="text" v-validate:field1.required.pattern="rules">' +
+          '<input type="text" v-validate:field1="rules">' +
           '</form>' +
           '</validator>'
         vm = new Vue({
diff --git a/test/specs/touched.js b/test/specs/touched.js
index f90461b..c7f03cf 100644
--- a/test/specs/touched.js
+++ b/test/specs/touched.js
@@ -11,8 +11,8 @@ describe('touched', () => {
     el.innerHTML = 
       '<validator name="validator1">' +
       '<form novalidate>' +
-      '<input type="text" v-validate:field1.required>' +
-      '<input type="text" v-validate:field2.required>' +
+      '<input type="text" v-validate:field1="{ required: true }">' +
+      '<input type="text" v-validate:field2="{ required: true }">' +
       '</form>' +
       '</validator>'
     vm = new Vue({
diff --git a/test/specs/untouched.js b/test/specs/untouched.js
index a0ea789..646ca55 100644
--- a/test/specs/untouched.js
+++ b/test/specs/untouched.js
@@ -11,8 +11,8 @@ describe('ununtouched', () => {
     el.innerHTML = 
       '<validator name="validator1">' +
       '<form novalidate>' +
-      '<input type="text" v-validate:field1.required>' +
-      '<input type="text" v-validate:field2.required>' +
+      '<input type="text" v-validate:field1="{ required: true }">' +
+      '<input type="text" v-validate:field2="{ required: true }">' +
       '</form>' +
       '</validator>'
     vm = new Vue({
diff --git a/test/specs/valid.js b/test/specs/valid.js
index af039be..afc255e 100644
--- a/test/specs/valid.js
+++ b/test/specs/valid.js
@@ -11,8 +11,8 @@ describe('valid', () => {
     el.innerHTML = 
       '<validator name="validator1">' +
       '<form novalidate>' +
-      '<input type="text" v-validate:field1.required.maxlength="{ maxlength: 3 }">' +
-      '<input type="text" value="foo" v-validate:field2.required.minlength="{ minlength: 1 }">' +
+      '<input type="text" v-validate:field1="{ required: true, maxlength: 3 }">' +
+      '<input type="text" value="foo" v-validate:field2="{ required: true, minlength: 1 }">' +
       '</form>' +
       '</validator>'
     vm = new Vue({