Vuejs:Consider pre-initializing the property with the “data” option for more reliable reactivity and better performance

Question

this is my code, https://jsfiddle.net/0od4hwmh/2/
it can be running when pick it out,
but when put it in my project of laravel 5.3,
there is an error:

[Vue warn]: You are setting a non-existent path "chosenFruite" on a vm instance. Consider pre-initializing the property with the "data" option for more reliable reactivity and better performance.

What is the probable problem?

Answer 1

This warning means you should init chosenFruite in your data like this:

var fruite = new Vue({
    el: '#fruite',
    data: {
        chosenfruite: '',
        items: [
            {message: 'apple'},
            {message: 'pear'},
            {message: 'peach'}
        ]
    },
    methods: {
        fillIn: function (item) {
            this.chosenfruite = item.message;
        }
    }
});

You can read more here