title: Vue JS simple v-model functionality on input field not working in Laravel app
body: <p>I am using vuejs as a drop in for some minor functionality in a Laravel app (i.e. not components) and for some reason that I'm yet to discover <code>v-model</code> is not working.</p>
  
  <p>Here's my base layout blade file that was generated via <code>php artisan make:auth</code>, contents mostly removed as irrelevant:</p>
  
  <p><strong>resources/views/layouts/app.blade.php</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="{{ str_replace('_', '-', app()-&gt;getLocale()) }}"&gt;
  &lt;head&gt;
      &lt;!-- css imports etc. --&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="app"&gt;
          &lt;nav class="navbar navbar-expand-md navbar-light navbar-laravel"&gt;
              &lt;!-- nav menu --&gt;
          &lt;/nav&gt;
  
          &lt;main class="py-4"&gt;
              @yield('content')
          &lt;/main&gt;
      &lt;/div&gt;
      @stack('scripts') &lt;---- Javascript goes here!
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here's the file where v-model is being used and not working, again, irrelevant parts have been removed:</p>
  
  <p><strong>resources/views/instructors/create.blade.php</strong></p>
  
  <pre><code>@extends('layouts.app')
  
  @section('content')
      &lt;div class="container"&gt;
          &lt;div class="row justify-content-center"&gt;
              &lt;div class="col-md-8"&gt;
                  &lt;div class="card"&gt;
                      &lt;div class="card-body"&gt;
                          &lt;div class="card-title"&gt;
                              &lt;h2&gt;vue: @{{ message }}&lt;/h2&gt; &lt;-- This works
                              &lt;div&gt;
                                  &lt;input type="text" v-model="message"&gt;  &lt;-- Blank!!?
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;!-- more html --&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  @endsection
  
  @push('scripts')
      &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          var app = new Vue({
              el: '#app',
              data: {
                  message: 'Hello Vue!'
              }
          });
      &lt;/script&gt;
  @endpush
  </code></pre>
  
  <p>The input field which <code>v-model="message"</code> is bound to is completely empty, however, when outputting <code>message</code> via curly braces I can see it's value. This is what it looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/c9MoM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/c9MoM.png" alt="enter image description here"></a></p>
  
  <p>Any ideas what's going wrong? I have checked the console and Vue dev tools and no errors show up, in fact nothing shows up at all in Vue dev tools - an issue perhaps? I copy pasted these code snippets from the Vue docs introduction to make sure I wasn't doing something silly. I have tried setting the data attribute inside the Vue instance as a function returning an object but it makes no difference. I also have the code working here: <a href="https://jsfiddle.net/eywraw8t/249625/" rel="nofollow noreferrer">https://jsfiddle.net/eywraw8t/249625/</a> where the input field shows the value of <code>message</code> as I am expecting it to work.</p>
  
  <p>I wouldn't consider myself a Vue pro but I'm no beginner and I cannot quite figure out what's going on. Any help would be appreciated, thanks!</p>
  
  <h3>Update</h3>
  
  <p>Thanks to everyone who answered. Made a silly mistake... I forgot that there is some JS that is pulled in, in the <code>&lt;head&gt;</code> when running <code>make:auth</code> - this includes Vue by default. I forgot to look properly here as assumed it would be prior to <code>&lt;/body&gt;</code>. I believe the two JS scrips were conflicting which was causing the issue. See <code>head</code> below:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="{{ str_replace('_', '-', app()-&gt;getLocale()) }}"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;!-- CSRF Token --&gt;
      &lt;meta name="csrf-token" content="{{ csrf_token() }}"&gt;
  
      &lt;title&gt;{{ config('app.name', 'Laravel') }}&lt;/title&gt;
  
      &lt;!-- Scripts --&gt;
      &lt;script src="{{ asset('js/app.js') }}" defer&gt;&lt;/script&gt; &lt;-- Vue included here
  
      &lt;!-- Fonts --&gt;
      &lt;link rel="dns-prefetch" href="https://fonts.gstatic.com"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css"&gt;
  
      &lt;!-- Styles --&gt;
      &lt;link href="{{ asset('css/app.css') }}" rel="stylesheet"&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>I commented the script out and it's working fine now.</p>