Vue property not valid with underscore

Question

I was doing some tests and I noticed that my properties are not valid when I used underscore.

Example:

new Vue({
el : "#form",

data: {
    errors: [],
    _username: '',
    _password: ''
});

on html file:

<input class="uk-input" type="text" v-model="_username" >
<input class="uk-input" type="password" v-model="_password">

With the code above the app won't render. If I remove the underscore it will work, does someone knows why this happens?

Answer 1

The answer may be found in the documentation

Properties that start with _ or $ will not be proxied on the Vue instance because they may conflict with Vue’s internal properties and API methods. You will have to access them as vm.$data._property

In your templates, you will have to reference $data._username / $data._password, eg

<input class="uk-input" type="text" v-model="$data._username" >
<input class="uk-input" type="password" v-model="$data._password">

Demo here ~ https://jsfiddle.net/9bzxuecj/2/