title: Import javascript file after component is mounted
body: <p>i am building spa using vuejs as the frontend and laravel as the backend, and i purcased some admin bootstrap template named <a href="https://themeforest.net/item/limitless-responsive-web-application-kit/13080328" rel="nofollow noreferrer">limitless</a> (very cool admin template by the way).</p>
  
  <p>But there is the problem with this template that in the main javascript file (app.js in admin directory) there is this line</p>
  
  <pre><code>// Calculate min height
      function containerHeight() {
          var availableHeight = $(window).height() - $('.page-container').offset().top - $('.navbar-fixed-bottom').outerHeight();
  
          $('.page-container').attr('style', 'min-height:' + availableHeight + 'px');
      }
  
      // Initialize
      containerHeight();
  </code></pre>
  
  <p>and because i am using spa vuejs so i only include all js file in my admin.blade.php file like this</p>
  
  <pre><code>&lt;!DOCTYPE Html&gt;
  &lt;Html lang="{{ config('app.locale') }}"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
      &lt;script&gt;
          window.Laravel = &lt;?php echo json_encode([
              'csrfToken' =&gt; csrf_token(),
          ]); ?&gt;
      &lt;/script&gt;
      &lt;title&gt;SIMO&lt;/title&gt;
      &lt;meta name="csrf-token" content="{{ csrf_token() }}" /&gt;
      &lt;!-- icon--&gt;
      &lt;link rel="icon" href="{{asset('images/logo.png')}}" sizes="16x16"&gt;
      &lt;link rel="icon" href="{{asset('images/logo.png')}}" sizes="32x32"&gt;
      &lt;link rel="apple-touch-icon" href="{{asset('images/logo.png')}}"/&gt;
      &lt;link rel="apple-touch-icon" href="{{asset('images/logo.png')}}" sizes="76x76" /&gt;
      &lt;link rel="apple-touch-icon" href="{{asset('images/logo.png')}}" sizes="120x120" /&gt;
      &lt;link rel="apple-touch-icon" href="{{asset('images/logo.png')}}" sizes="152x152" /&gt;
      &lt;link rel="apple-touch-icon" href="{{asset('images/logo.png')}}" sizes="180x180" /&gt;
      &lt;!-- Bootstrap Core CSS --&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="{{asset('css/admin/icons/icomoon/styles.css')}}" &gt;
      {{-- &lt;link rel="stylesheet" type="text/css" href="{{asset('css/admin/icons/fontawesome/styles.min.css')}}" &gt; --}}
      &lt;link rel="stylesheet" type="text/css" href="{{asset('css/admin/bootstrap.css')}}" &gt;
      &lt;link rel="stylesheet" type="text/css" href="{{asset('css/admin/core.css')}}" &gt;
      &lt;link rel="stylesheet" type="text/css" href="{{asset('css/admin/components.css')}}" &gt;
      &lt;link rel="stylesheet" type="text/css" href="{{asset('css/admin/colors.css')}}" &gt;
      @yield('css')
  
      &lt;!-- Html5 Shim and Respond.js IE8 support of Html5 elements and media queries --&gt;
      &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
      &lt;!--[if lt IE 9]&gt;
      &lt;script src="https://oss.maxcdn.com/libs/Html5shiv/3.7.0/Html5shiv.js"&gt;&lt;/script&gt;
      &lt;script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="app"&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript" src="{{ URL::asset('js/app.js') }}"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="{{ URL::asset('js/admin/plugins/loaders/pace.min.js') }}"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="{{ URL::asset('js/admin/libraries/jquery.min.js') }}"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="{{ URL::asset('js/admin/libraries/bootstrap.min.js') }}"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="{{ URL::asset('js/admin/plugins/loaders/blockui.min.js') }}"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="{{ URL::asset('js/admin/plugins/ui/nicescroll.min.js') }}"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="{{ URL::asset('js/admin/plugins/ui/drilldown.js') }}"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="{{ URL::asset('js/admin/plugins/buttons/hover_dropdown.min.js') }}"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="{{ URL::asset('js/admin/plugins/forms/selects/bootstrap_select.min.js') }}"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="{{ URL::asset('js/admin/plugins/ui/ripple.min.js') }}"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="{{ URL::asset('js/admin/app.js') }}"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/Html&gt;
  </code></pre>
  
  <p>and after inspecting the code i found out that it need div with class <code>page-container</code> and this div is located after header part so in my index.vue page i put it like this</p>
  
  <pre><code>&lt;template&gt;
  &lt;div&gt;
     &lt;div class="page-header"&gt;
       //here is header
     &lt;/div&gt;
     &lt;div class="page-container"&gt;
      //content
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>so it will throw </p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'top' of undefined
  </code></pre>
  
  <p>because when the page loaded it don't find any div with <code>page-container</code> class, since it not there yet. </p>
  
  <p>And from what i read in vuejs documentation about lifecycle, this entire admin/app.js code should be run in mounted() or created() vuejs function. But from the example in documentation and around the internet it just used for run some javascript function but not include entire javascript file so it will be executed in there....</p>
  
  <p>so my question is how to solve this? or for more simple way, how to add external css file and javascript file in component(this index.vue is called component right?) some people tell me to make it module and import it but i have no idea how to do that.... </p>
  
  <p>from what i know is i can download javascript plugin like moment from npm and it magically can be called within vue with <code>import moment from moment</code> but how about the local javascript files?</p>