Estoy haciendo pruebas con vuejs y la libreria VeeValidate que es para validar campos en un fomulario.
Tengo un ejemplo para validar un campo de email como el siguiente:
<form>
<div class="form-group" :class="{'has-error': errors.has('email') }" >
<label class="control-label" for="email">Email</label>
<input v-model="email" v-validate="email" data-rules="required|email" class="form-control" type="email" placeholder="Email">
<p class="text-danger" v-if="errors.has('email')">{{ errors.first('email') }}</p>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
El problema es que cuando hago la prueba en un browser, vue.js no hace la interpolación de las variables y me muestra algo como lo siguiente:
{{ errors.first('email') }}
Las versiones que estoy usando de vue.js y VeeValidate son las siguientes:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/vee-validate/2.0.0-beta.25/vee-validate.min.js"></script>
El codigó completo esta en el siguiente gist:
¿Alguien me puede decir qué es lo que le falta al código o qué es lo que estoy haciendo mal?