title: How to use html template with vue.js
body: <p>I just want to try using <code>vue.js</code> but got into trouble when I try to use a template that I bought. I've put all the <code>.css</code> and <code>.js</code> files into index.html and then call the components inside <code>vue.js</code> itself.</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta content="width=device-width, initial-scale=1" name="viewport"/&gt;
      &lt;meta content="Preview page of Metronic Admin Theme #1 for statistics, charts, recent events and reports"
            name="description"/&gt;
      &lt;meta content="" name="author"/&gt;
  
      &lt;title&gt;My Application&lt;/title&gt;
  
      &lt;!-- BEGIN GLOBAL MANDATORY STYLES --&gt;
      &lt;link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&amp;subset=all" rel="stylesheet"
            type="text/css"/&gt;
      &lt;link href="assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/&gt;
      &lt;link href="assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/&gt;
      &lt;link href="assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/&gt;
      &lt;link href="assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css"/&gt;
      &lt;!-- END GLOBAL MANDATORY STYLES --&gt;
      &lt;!-- BEGIN PAGE LEVEL PLUGINS --&gt;
      &lt;link href="assets/global/plugins/bootstrap-daterangepicker/daterangepicker.min.css" rel="stylesheet"
            type="text/css"/&gt;
      &lt;link href="assets/global/plugins/morris/morris.css" rel="stylesheet" type="text/css"/&gt;
      &lt;link href="assets/global/plugins/fullcalendar/fullcalendar.min.css" rel="stylesheet" type="text/css"/&gt;
      &lt;link href="assets/global/plugins/jqvmap/jqvmap/jqvmap.css" rel="stylesheet" type="text/css"/&gt;
      &lt;!-- END PAGE LEVEL PLUGINS --&gt;
      &lt;!-- BEGIN THEME GLOBAL STYLES --&gt;
      &lt;link href="assets/global/css/components-md.min.css" rel="stylesheet" id="style_components" type="text/css"/&gt;
      &lt;link href="assets/global/css/plugins-md.min.css" rel="stylesheet" type="text/css"/&gt;
      &lt;!-- END THEME GLOBAL STYLES --&gt;
      &lt;!-- BEGIN THEME LAYOUT STYLES --&gt;
      &lt;link href="assets/layouts/layout/css/layout.min.css" rel="stylesheet" type="text/css"/&gt;
      &lt;link href="assets/layouts/layout/css/themes/darkblue.min.css" rel="stylesheet" type="text/css" id="style_color"/&gt;
      &lt;link href="assets/layouts/layout/css/custom.min.css" rel="stylesheet" type="text/css"/&gt;
      &lt;!-- END THEME LAYOUT STYLES --&gt;
      &lt;link rel="shortcut icon" href="src/assets/logo.png"/&gt;
  
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css"&gt;
  
      &lt;!-- BEGIN CORE PLUGINS --&gt;
      &lt;script src="assets/global/plugins/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/js.cookie.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/jquery.blockui.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;!-- END CORE PLUGINS --&gt;
      &lt;!-- BEGIN PAGE LEVEL PLUGINS --&gt;
      &lt;script src="assets/global/plugins/moment.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/bootstrap-daterangepicker/daterangepicker.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/morris/morris.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/morris/raphael-min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/counterup/jquery.waypoints.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/counterup/jquery.counterup.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/amcharts/amcharts/amcharts.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/amcharts/amcharts/serial.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/amcharts/amcharts/pie.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/amcharts/amcharts/radar.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/amcharts/amcharts/themes/light.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/amcharts/amcharts/themes/patterns.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/amcharts/amcharts/themes/chalk.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/amcharts/ammap/ammap.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/amcharts/ammap/maps/js/worldLow.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/amcharts/amstockcharts/amstock.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/fullcalendar/fullcalendar.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/horizontal-timeline/horizontal-timeline.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/flot/jquery.flot.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/flot/jquery.flot.resize.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/flot/jquery.flot.categories.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/jquery-easypiechart/jquery.easypiechart.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/jquery.sparkline.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/jqvmap/jqvmap/jquery.vmap.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.russia.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.world.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.europe.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.germany.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.usa.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/global/plugins/jqvmap/jqvmap/data/jquery.vmap.sampledata.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;!-- END PAGE LEVEL PLUGINS --&gt;
      &lt;!-- BEGIN THEME GLOBAL SCRIPTS --&gt;
      &lt;script src="assets/global/scripts/app.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;!-- END THEME GLOBAL SCRIPTS --&gt;
      &lt;!-- BEGIN PAGE LEVEL SCRIPTS --&gt;
      &lt;script src="assets/pages/scripts/dashboard.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;!-- END PAGE LEVEL SCRIPTS --&gt;
      &lt;!-- BEGIN THEME LAYOUT SCRIPTS --&gt;
      &lt;script src="assets/layouts/layout/scripts/layout.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/layouts/layout/scripts/demo.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="assets/layouts/global/scripts/quick-nav.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;!-- END THEME LAYOUT SCRIPTS --&gt;
  &lt;/head&gt;
  
  
  &lt;/head&gt;
  &lt;body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white page-md"&gt;
  
      &lt;div class="page-wrapper"&gt;
          &lt;div id="app"&gt;&lt;/div&gt;
          &lt;script src="/dist/build.js"&gt;&lt;/script&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>All pages are running perfectly and successfully called by  belongs <code>vue.js</code> but <strong>does not appear</strong> if I use the calling page with <code>&lt;router-link&gt;</code></p>
  
  <p><strong>Graph.vue</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;h1 class="page-title"&gt; Grafik Pages
              &lt;small&gt;statistics, charts, recent events and reports&lt;/small&gt;
          &lt;/h1&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="col-lg-6 col-xs-12 col-sm-12"&gt;
                  &lt;!-- BEGIN PORTLET--&gt;
                  &lt;div class="portlet light bordered"&gt;
                      &lt;div class="portlet-title"&gt;
                          &lt;div class="caption"&gt;
                              &lt;i class="icon-bar-chart font-dark hide"&gt;&lt;/i&gt;
                              &lt;span class="caption-subject font-dark bold uppercase"&gt;Site Visits&lt;/span&gt;
                              &lt;span class="caption-helper"&gt;weekly stats...&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div class="actions"&gt;
                              &lt;div class="btn-group btn-group-devided" data-toggle="buttons"&gt;
                                  &lt;label class="btn red btn-outline btn-circle btn-sm active"&gt;
                                      &lt;input name="options" class="toggle" id="option1" type="radio"&gt;New&lt;/label&gt;
                                  &lt;label class="btn red btn-outline btn-circle btn-sm"&gt;
                                      &lt;input name="options" class="toggle" id="option2" type="radio"&gt;Returning&lt;/label&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="portlet-body"&gt;
  
                          &lt;div id="site_statistics_loading" style="display: none;"&gt;
                              &lt;img src="../../../assets/global/img/loading.gif" alt="loading"&gt; &lt;/div&gt;
                          &lt;div id="site_statistics_content" class="display-none" style="display: block;"&gt;
                              &lt;div id="site_statistics" class="chart" style="padding: 0px; position: relative;"&gt; &lt;canvas class="flot-base" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 438px; height: 300px;" width="657" height="450"&gt;&lt;/canvas&gt;&lt;div class="flot-text" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);"&gt;&lt;div class="flot-x-axis flot-x1-axis xAxis x1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"&gt;&lt;div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px &amp;quot;Open Sans&amp;quot;,sans-serif; color: rgb(111, 123, 138); left: 10px; text-align: center;"&gt;02/2013&lt;/div&gt;&lt;div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px &amp;quot;Open Sans&amp;quot;,sans-serif; color: rgb(111, 123, 138); left: 58px; text-align: center;"&gt;03/2013&lt;/div&gt;&lt;div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px &amp;quot;Open Sans&amp;quot;,sans-serif; color: rgb(111, 123, 138); left: 107px; text-align: center;"&gt;04/2013&lt;/div&gt;&lt;div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px &amp;quot;Open Sans&amp;quot;,sans-serif; color: rgb(111, 123, 138); left: 155px; text-align: center;"&gt;05/2013&lt;/div&gt;&lt;div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px &amp;quot;Open Sans&amp;quot;,sans-serif; color: rgb(111, 123, 138); left: 203px; text-align: center;"&gt;06/2013&lt;/div&gt;&lt;div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px &amp;quot;Open Sans&amp;quot;,sans-serif; color: rgb(111, 123, 138); left: 251px; text-align: center;"&gt;07/2013&lt;/div&gt;&lt;div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px &amp;quot;Open Sans&amp;quot;,sans-serif; color: rgb(111, 123, 138); left: 300px; text-align: center;"&gt;08/2013&lt;/div&gt;&lt;div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px &amp;quot;Open Sans&amp;quot;,sans-serif; color: rgb(111, 123, 138); left: 348px; text-align: center;"&gt;09/2013&lt;/div&gt;&lt;div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px &amp;quot;Open Sans&amp;quot;,sans-serif; color: rgb(111, 123, 138); left: 396px; text-align: center;"&gt;10/2013&lt;/div&gt;&lt;/div&gt;&lt;div class="flot-y-axis flot-y1-axis yAxis y1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"&gt;&lt;div style="position: absolute; top: 273px; font: small-caps 400 11px/14px &amp;quot;Open Sans&amp;quot;,sans-serif; color: rgb(111, 123, 138); left: 20px; text-align: right;"&gt;0&lt;/div&gt;&lt;div style="position: absolute; top: 220px; font: small-caps 400 11px/14px &amp;quot;Open Sans&amp;quot;,sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;"&gt;1000&lt;/div&gt;&lt;div style="position: absolute; top: 166px; font: small-caps 400 11px/14px &amp;quot;Open Sans&amp;quot;,sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;"&gt;2000&lt;/div&gt;&lt;div style="position: absolute; top: 113px; font: small-caps 400 11px/14px &amp;quot;Open Sans&amp;quot;,sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;"&gt;3000&lt;/div&gt;&lt;div style="position: absolute; top: 59px; font: small-caps 400 11px/14px &amp;quot;Open Sans&amp;quot;,sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;"&gt;4000&lt;/div&gt;&lt;div style="position: absolute; top: 6px; font: small-caps 400 11px/14px &amp;quot;Open Sans&amp;quot;,sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;"&gt;5000&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;canvas class="flot-overlay" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 438px; height: 300px;" width="657" height="450"&gt;&lt;/canvas&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- END PORTLET--&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-6 col-xs-12 col-sm-12"&gt;
                  &lt;!-- BEGIN PORTLET--&gt;
                  &lt;div class="portlet light bordered"&gt;
                      &lt;div class="portlet-title"&gt;
                          &lt;div class="caption"&gt;
                              &lt;i class="icon-share font-red-sunglo hide"&gt;&lt;/i&gt;
                              &lt;span class="caption-subject font-dark bold uppercase"&gt;Revenue&lt;/span&gt;
                              &lt;span class="caption-helper"&gt;monthly stats...&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div class="actions"&gt;
                              &lt;div class="btn-group"&gt;
                                  &lt;a href="" class="btn dark btn-outline btn-circle btn-sm dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true"&gt; Filter Range
                                      &lt;span class="fa fa-angle-down"&gt; &lt;/span&gt;
                                  &lt;/a&gt;
                                  &lt;ul class="dropdown-menu pull-right"&gt;
                                      &lt;li&gt;
                                          &lt;a href="javascript:;"&gt; Q1 2014
                                              &lt;span class="label label-sm label-default"&gt; past &lt;/span&gt;
                                          &lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;
                                          &lt;a href="javascript:;"&gt; Q2 2014
                                              &lt;span class="label label-sm label-default"&gt; past &lt;/span&gt;
                                          &lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li class="active"&gt;
                                          &lt;a href="javascript:;"&gt; Q3 2014
                                              &lt;span class="label label-sm label-success"&gt; current &lt;/span&gt;
                                          &lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;
                                          &lt;a href="javascript:;"&gt; Q4 2014
                                              &lt;span class="label label-sm label-warning"&gt; upcoming &lt;/span&gt;
                                          &lt;/a&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="portlet-body"&gt;
                          &lt;div id="site_activities_loading" style="display: none;"&gt;
                              &lt;img src="../../../assets/global/img/loading.gif" alt="loading"&gt; &lt;/div&gt;
                          &lt;div id="site_activities_content" class="display-none" style="display: block;"&gt;
                              &lt;div id="site_activities" style="height: 228px; padding: 0px; position: relative;"&gt; &lt;canvas class="flot-base" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 438px; height: 228px;" width="657" height="342"&gt;&lt;/canvas&gt;&lt;div class="flot-text" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);"&gt;&lt;div class="flot-x-axis flot-x1-axis xAxis x1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"&gt;&lt;div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px &amp;quot;Open Sans&amp;quot;,sans-serif; color: rgb(111, 123, 138); left: 21px; text-align: center;"&gt;DEC&lt;/div&gt;&lt;div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px &amp;quot;Open Sans&amp;quot;,sans-serif; color: rgb(111, 123, 138); left: 66px; text-align: center;"&gt;JAN&lt;/div&gt;&lt;div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px &amp;quot;Open Sans&amp;quot;,sans-serif; color: rgb(111, 123, 138); left: 109px; text-align: center;"&gt;FEB&lt;/div&gt;&lt;div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px &amp;quot;Open Sans&amp;quot;,sans-serif; color: rgb(111, 123, 138); left: 151px; text-align: center;"&gt;MAR&lt;/div&gt;&lt;div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px &amp;quot;Open Sans&amp;quot;,sans-serif; color: rgb(111, 123, 138); left: 197px; text-align: center;"&gt;APR&lt;/div&gt;&lt;div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px &amp;quot;Open Sans&amp;quot;,sans-serif; color: rgb(111, 123, 138); left: 239px; text-align: center;"&gt;MAY&lt;/div&gt;&lt;div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px &amp;quot;Open Sans&amp;quot;,sans-serif; color: rgb(111, 123, 138); left: 285px; text-align: center;"&gt;JUN&lt;/div&gt;&lt;div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px &amp;quot;Open Sans&amp;quot;,sans-serif; color: rgb(111, 123, 138); left: 330px; text-align: center;"&gt;JUL&lt;/div&gt;&lt;div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px &amp;quot;Open Sans&amp;quot;,sans-serif; color: rgb(111, 123, 138); left: 371px; text-align: center;"&gt;AUG&lt;/div&gt;&lt;div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px &amp;quot;Open Sans&amp;quot;,sans-serif; color: rgb(111, 123, 138); left: 417px; text-align: center;"&gt;SEP&lt;/div&gt;&lt;/div&gt;&lt;div class="flot-y-axis flot-y1-axis yAxis y1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"&gt;&lt;div style="position: absolute; top: 197px; font: small-caps 400 11px/14px &amp;quot;Open Sans&amp;quot;,sans-serif; color: rgb(111, 123, 138); left: 20px; text-align: right;"&gt;0&lt;/div&gt;&lt;div style="position: absolute; top: 149px; font: small-caps 400 11px/14px &amp;quot;Open Sans&amp;quot;,sans-serif; color: rgb(111, 123, 138); left: 7px; text-align: right;"&gt;500&lt;/div&gt;&lt;div style="position: absolute; top: 100px; font: small-caps 400 11px/14px &amp;quot;Open Sans&amp;quot;,sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;"&gt;1000&lt;/div&gt;&lt;div style="position: absolute; top: 52px; font: small-caps 400 11px/14px &amp;quot;Open Sans&amp;quot;,sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;"&gt;1500&lt;/div&gt;&lt;div style="position: absolute; top: 3px; font: small-caps 400 11px/14px &amp;quot;Open Sans&amp;quot;,sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;"&gt;2000&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;canvas class="flot-overlay" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 438px; height: 228px;" width="657" height="342"&gt;&lt;/canvas&gt;&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div style="margin: 20px 0 10px 30px"&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="col-md-3 col-sm-3 col-xs-6 text-stat"&gt;
                                      &lt;span class="label label-sm label-success"&gt; Revenue: &lt;/span&gt;
                                      &lt;h3&gt;$13,234&lt;/h3&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-md-3 col-sm-3 col-xs-6 text-stat"&gt;
                                      &lt;span class="label label-sm label-info"&gt; Tax: &lt;/span&gt;
                                      &lt;h3&gt;$134,900&lt;/h3&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-md-3 col-sm-3 col-xs-6 text-stat"&gt;
                                      &lt;span class="label label-sm label-danger"&gt; Shipment: &lt;/span&gt;
                                      &lt;h3&gt;$1,134&lt;/h3&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-md-3 col-sm-3 col-xs-6 text-stat"&gt;
                                      &lt;span class="label label-sm label-warning"&gt; Orders: &lt;/span&gt;
                                      &lt;h3&gt;235090&lt;/h3&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- END PORTLET--&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          created () {
  
          },
          methods: {
  
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>But when I refresh the page (manual), the chart data to come up with the perfect.</p>
  
  <p>App.vue</p>
  
  <pre><code>&lt;template&gt;
      &lt;div id="app"&gt;
          &lt;navbar&gt;&lt;/navbar&gt;
          &lt;div class="page-container"&gt;
              &lt;leftmenu&gt;&lt;/leftmenu&gt;
              &lt;container&gt;&lt;/container&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  import Menu from './components/Menu.vue'
  import LeftMenu from './components/Leftmenu.vue'
  import Container from './components/Container.vue'
  
  export default {
      components: {
          'navbar': Menu,
          'leftmenu': LeftMenu,
          'container': Container,
      }
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>routes.js</p>
  
  <pre><code>import Vue from 'vue'
  import VueRouter from 'vue-router'
  
  Vue.use(VueRouter)
  
  const router = new VueRouter({
      routes: [
          {
              path: "/",
              component: require('./components/pages/Home.vue'),
              meta: {
                  forVisitors: true
              }
          },
          {
              path: "/home",
              component: require('./components/pages/Home.vue'),
              meta: {
                  forVisitors: true
              }
          },
          {
              path: "/graph",
              component: require('./components/pages/Graph.vue'),
              meta: {
                  forVisitors: true
              }
          },
          {
              path: "/form",
              component: require('./components/pages/Form.vue'),
              meta: {
                  forVisitors: true
              }
          }
      ],
      linkActiveClass: 'nav-item start active open',
      mode: 'history'
  })
  
  export default router
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/X5m28.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X5m28.png" alt="1"></a></p>
  
  <p>What I miss??</p>
  
  <p>Thanks</p>