app.message returns undefined in console using Vue in Laravel

Question

I've just started learning Vue, and have been following there intro guide, but am stuck at the:

Just open up your browser’s JavaScript console and set app.message to a different value.

I tried app.message = 'test' in Chrome's console, and it returns "test", but the text doesn't change in the browser.

Also when I just run app.message before setting it to "test", it returns undefined.

app.js

require('./bootstrap');

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

./bootstrap

window._ = require('lodash');

window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');

window.Vue = require('vue');
require('vue-resource');

Vue.http.interceptors.push((request, next) => {
    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);

    next();
});

test.blade.php

@extends('layouts.app')

@section('content')
<div id="app">
  @{{ message }}
</div>
@endsection

I'm guessing its something to do with what Laravel does since when I start a standalone html file it works as Vue says. I'm also new to Laravel so not to sure what's going on here.

Using Vue 2 and Laravel 5.3

Answer 1

Well, as far as I can see from the live link is that its not the problem you anticipated at all. app returns an HTML element collection and not a Vue object. Try logging $vm(the Vue object) in your console and you will see the difference. Maybe, try renaming the object from const app to vue(lowercase) as I think you(or the package manager or something) have used app somewhere else.

The reason why app.message returns "test" on console is that every console statement returns something. It returns undefined first because app(The HTML collection) doesn't have a property named message.