[Vue warn]: Property or method “X” is not defined on the instance but referenced during render

Question

I've started to use Vue and the first thing that I did which was just print a message, I got the following error:

[Vue warn]: Property or method "message" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Console error

[Vue warn]: Property or method "message" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>)
warn @ app.js:38229
warnNonPresent @ app.js:39646
has @ app.js:39691
eval @ VM1470:3
Vue._render @ app.js:41151
updateComponent @ app.js:41669
get @ app.js:42082
Watcher @ app.js:42071
mountComponent @ app.js:41676
Vue.$mount @ app.js:46653
Vue.$mount @ app.js:49562
Vue._init @ app.js:42617
Vue @ app.js:42684
./resources/js/app.js @ app.js:1925
__webpack_require__ @ app.js:49605
checkDeferredModulesImpl @ app.js:49743
__webpack_require__.x @ app.js:49756
(anonymous) @ app.js:49763
(anonymous) @ app.js:49765

How my app.js looks

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue').default;

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});

How my index.blade looks

@extends('web.master')

@section('content')

    <h1>Hello World!</h1>
    <div id="app">
        @{{ message }}
    </div>
@endsection

The default component render well but this example is not working and i would like to know why!

VUE V2.X

Please don't post images of code. All code needs to be copied into the question itself. You can read more why here: Why not upload images of code/errors when asking a question? — Magnus Eriksson
You should also only add tags that are directly relevant to the issue at hand. In this case, I don't see PHP or npm being relevant to your actual problem. — Magnus Eriksson

Edo San Edo San · Accepted Answer · 2021-03-29T10:16:19

As for the VueJS specifications, data should be a function that returns an object. Thus it should be something like this:

data: function() {
  return {
    message: 'Hello Vue!'
  }
}

You can check the official docs for reference

[Vue warn]: Property or method “X” is not defined on the instance but referenced during render

1 Answers