app.message returns undefined in console using Vue in Laravel

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