Vuejs on Laravel blade

Question

I tried to write a Basic vue script but it somehow does not work in my larave blade template.

I get this error:

app.js:32753 [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://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties .

(found in )

The Code so far:

@extends('layouts.app')

@section('content')

    <div id="foo">
      @{{ message }}
    </div>

@endsection

@section('javascript')
    <script>
    new Vue({
      el: '#foo',
      data: {
        message: 'Hello Vue!'
      }
    })
    </script>
@endsection

Answer 1

Can't see what's wrong. so the problem is probably with this code

@section('javascript')
    <script>
    new Vue({
      el: '#foo',
      data: {
        message: 'Hello Vue!'
      }
    })
    </script>
@endsection

You might not have yield('javascript') at your layouts/app.blade.php

Answer 2

data should be a function that returns an object.

new Vue({
  el: '#foo',
  data: function () {
    return {
      message: 'Hello Vue!'
    }
  }
})

Source: https://v2.vuejs.org/v2/style-guide/#Component-data-essential