I am currently working on Laravel 5.3 and Vue Js, i have following structure of application.

1. resource/view/layouts/plane.blade.php (works as master.blade.php)
2. resource/view/layouts/dashboard.blade.php (works as child.blade.php - extends plane)
3. resource/view/index.blade.php (current blade file - extends dashboard)
4. public/js/blog.js

**plane.blade.php code**

```
 <!DOCTYPE html>
     <html lang="en" class="no-js">
         <head>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
                <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
                <link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
                <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
                <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.min.js"></script>
                <script type="text/javascript" src="/js/blog.js"></script>

          </head>
           <body>
                  @yield('body')
           </body>
     </html>

```

**dashboard.blade.php code** 

```
 @extends('layouts.plane')

 @section('body')
        <div class="row" id="manage-vue">
            @yield('section')
       </div>

  @stop

```

**index.blade.php code**

```
 @extends('layouts.dashboard') 

 @section('page_heading','Blog')

 @section('section')

<div >

    @{{ message }}

</div>

@stop

```

**blog.js code**

```
    var myModel =  new Vue({
       el: '#manage-vue',
       data: {
           message: 'Hello Vue.js!'
       }
   });

```

With these separate files, i am not getting result, as it shows error **Cannot find element: #app**.

If i place category.js code in index.blade.php file, i get correct result.

How can i work with separate files ?