title: Using props to set different text on every page in vue.js
body: <p>I am using laravel + vue. I want to do title of page in navbar, so when you are in index, in navbar is text index. When you are in settings, navbar says settings etc.</p>
  
  <p>I think props is good for it, but when I use that, it works not good. Look here:</p>
  
  <p>blade.php of index:</p>
  
  <pre><code>@extends('layout.app')
  
  @section('content')
      &lt;index :msg="msg"&gt;&lt;/index&gt;
  @endsection
  </code></pre>
  
  <p>index.vue:</p>
  
  <pre><code>props: [
              'msg'
          ],
  </code></pre>
  
  <p>Now navbar:</p>
  
  <pre><code>&lt;template&gt;
  &lt;nav class="navbar"&gt;
          &lt;a&gt;&lt;/a&gt;
          &lt;p&gt;{{msg}}&lt;/p&gt;
  &lt;/nav&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          props: [
           ],
          data() {
              return {
              }
          },
  
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>and layout:</p>
  
  <pre><code> &lt;body&gt;
      &lt;div id="app"&gt;
          &lt;navbar&gt;&lt;/navbar&gt;
          @yield('content')
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>How I can change that {{msg}} paragraph in navbar when we are on different pages? My code doesn't work. </p>
  
  <pre><code>[Vue warn]: Property or method "msg" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
  </code></pre>