How to "bind" a Vue.js variable without using the keys

Question

I’m starting to work now with Laravel 5 + Vue.js and I’m having problems with loading my page. My Vue variables are exposed at startup and are only rendered after javascript loads. My example is the following:

// adicionei o `setTimeout` somente para simular o problema
setTimeout(function(){
  var app = new Vue({
    el: '#foo',
    data: {
      form: {
        email: ''
      },
      messages: {}
    }
  });
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<form id="foo" v-on:submit.prevent>
    <div>
        <label>E-mail</label>
        <input type="text" v-model="form.email" />
        <small v-if="messages.email">@{{messages.email}}</small>
     </div>
</form>

I need to know if there’s any way I can make my statement <small/> which presents the error messages to the user but without using the keys, so regardless of the time the screen takes to load I still have a better UX..

Answer 1

Oops, snooping on the net bumped right after inserting the question here. The solution is the directive v-text as shown in this link getting my html like this:

<form id="foo" v-on:submit.prevent>
    <div>
        <label>E-mail</label>
        <input type="text" v-model="form.email" />
        <small v-if="messages.email" v-text="messages.email"></small>
     </div>
</form>