Vue 2 with Component.vue & Vue-Router 2 & Vue-Validator 3 not working

[yang5664]

vue & vue-validator version

"vue": "^2.0.1",
"vue-router": "^2.0.0",
"vue-validator": 3.0.0-alpha.1

Reproduction Link

Steps to reproduce

App.vue

<template>
  <div id="app">
    <router-view></router-view>
    <router-link :to="{ name: 'test' }">Test</router-link>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#app {
  color: #2c3e50;
  margin-top: -100px;
  max-width: 600px;
  font-family: Source Sans Pro, Helvetica, sans-serif;
  text-align: center;
}

#app a {
  color: #42b983;
  text-decoration: none;
}
</style>

ValidTest2.vue

<template>
  <div>
    <validator name="validation">
      <form novalidate>
        message: <input type="text" v-fieldname="message" v-validate:message="{ required: true, minlength: 8 }"><br />
        <div>
          <p v-if="$validation.message.required">Required your message.</p>
          <p v-if="$validation.message.minlength">Too short message.</p>
        </div>
      </form>
    </validator>
  </div>
</template>
<script>
  export default{
    data () {
      return {
        message: 'hello vue'
      }
    }
  }
</script>

app.js

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import VueValidator from 'vue-validator'

Vue.use(VueValidator)
Vue.use(VueRouter)
const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
        {
            path: '/test',
            component: require('./components/ValidTest2.vue'),
            name: 'test'
        },
  ]
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

What is Expected?

how can make it work?

What is actually happening?

[Vue warn]: Property or method "$validation1" is not defined on the instance but referenced during render. 
Make sure to declare reactive data properties in the data option. 
(found in anonymous component at ValidTest2.vue)

[haussjonas]

As far as I know, they're going to remove the validator element.

Have a look at the 3.0 release examples.

The validation and validity components are your new validation components.

[jiayaoaaa]

i have the somme problem..

[yang5664]

You may try this sample code

<template v-fieldset="Test">
  <transition name="fade" mode="out-in" appear>
    <div class="login_bg">
      <div class="login_logo">
      </div>
      <validation name="login" @submit="handleSubmit">
        <div class="login_area">
          <h4>請使用下列方式登入帳號:</h4>
          <div class="form-group">
            <label class="sr-only" for="email">E-mail帳號</label>
            <validity ref="email" field="email" :validators="{
                          required: { message: '請輸入Email !!' }
                        }">
              <input type="text" class="form-control" id="email" placeholder="輸入E-mail帳號" @focusout="handleValidate">
            </validity>
          </div>
          <div class="form-group">
            <label class="sr-only" for="password">密碼</label>
            <validity ref="password" field="password" :validators="{ required: { message: '請輸入密碼 !!' } }">
              <input id="password" type="password" class="form-control" placeholder="輸入密碼" @focusout="handleValidate">
            </validity>
          </div>
          <button type="submit" class="btn btn-default login_btn":disabled="!validated || !valid">登入</button>
          <div class="errors">
            <p v-for="error in errors">{{error.message}}</p>
          </div>
          <div class="login_bottom_area">
          </div>
        </div>
      </validation>
    </div>
  </transition>
</template>
<script>
  import { mapValidation } from 'vue-validator'
  import { mapActions, mapGetters } from 'vuex'
  export default{
    data () {
      return {
        message: 'hello vue',
        validated: false
      }
    },
    computed: {
      ...mapGetters({
      }),
      ...mapValidation({
        valid: '$validation.login.valid',
        errors: '$validation.login.errors'
      })
    },
    validators: {
      confirm: function (val) {
        return val === this.$refs.password.$el.value
      }
    },
    methods: {
      ...mapActions({
      }),
      handleSubmit: function (e) {
        if (!this.validated || !this.valid) {
          e.preventDefault()
        }
      },
      handleValidate: function (e) {
        var self = this
        e.target.$validity.validate(function () {
          self.validated = true
        })
      }
    }
  }
</script>

[laubd]

it can't insert components in the ....