[Vue warn]: Cannot find element: #app : <p>I have a fresh installed laravel project with all the components updated.</p>

<p>All I did is tried to add <code>app.js</code> in my welcome.blade.php file, after adding the following I get this error</p>

<blockquote>
  <p>[Vue warn]: Cannot find element: #app </p>
</blockquote>

<p>I followed this thread, but it's not relevant as my script is at the bottom of the page.
<a href="https://laracasts.com/discuss/channels/vue/fresh-laravel-setup-and-vue-2-wont-work" rel="noreferrer">https://laracasts.com/discuss/channels/vue/fresh-laravel-setup-and-vue-2-wont-work</a></p>

<p>Here's my file</p>

<pre><code>    &lt;!DOCTYPE html&gt;
&lt;html lang="en"&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;title&gt;{{$project}} | {{ $title }}&lt;/title&gt;

    &lt;!-- Fonts --&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css"&gt;

    &lt;!-- Styles --&gt;
    &lt;link href="/css/app.css" rel="stylesheet" type="text/css"/&gt;

    &lt;style&gt;
      ...
    &lt;/style&gt;
    &lt;/head&gt;
    &lt;body class="sticky-nav"&gt;
    &lt;div id="nav"&gt;
    &lt;div class="display-sm"&gt;
        &lt;header class="top-header"&gt;
            &lt;span class="menu-icon"&gt;☰&lt;/span&gt;
        &lt;/header&gt;
    &lt;/div&gt;
        &lt;div class="custom-container"&gt;
        &lt;div id="logo" class="float-left"&gt;
            &lt;img alt="xyz" src="/images/xyz.png"/&gt;&lt;span&gt; xyz&lt;/span&gt;
        &lt;/div&gt;
        &lt;div id="btn-project" class="float-right"&gt;
            &lt;a title="project" href="#" class="btn btn-project"&gt;Project&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="sub-container"&gt;
    &lt;h1 id="header-title"&gt;{{ $header_title }}&lt;/h1&gt;
    &lt;h2 id="meta-data"&gt;&lt;i class="fa fa"&gt;&lt;/i&gt;{{$location}} &lt;span id="category"&gt; &lt;i&gt;&lt;/i&gt;{{$category}} &lt;/span&gt;&lt;/h2&gt;
    &lt;div class="clear"&gt;&lt;/div&gt;

    &lt;/div&gt;
    &lt;script src="/js/app.js"&gt;&lt;/script&gt;
    &lt;script&gt;
    var wrap = $(".sticky-nav");

    wrap.on("scroll", function (e) {

        if (this.scrollTop &gt; 147) {
            wrap.find('#nav').addClass("fix-nav");
        } else {
            wrap.find('#nav').removeClass("fix-nav");
        }

        });
    &lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;
</code></pre>
