create static page with vuejs
This may be an incorrect assumption, but it seems like with your proposed approach, you would need to either keep the HTML for each page within the HTML for the main page in the onclick attributes for each link or else have the links contain a key that corresponds to a mapping of keys to HTML for the pages.

There are tools like Vue Router that are built for this scenario. With Vue Router you can have the HTML templates stored in separate files and imported into the router. 

One other thing I noticed in your sample VueJS code is that you have a Vue object for the header and a Vue object for the page. Those could be combined into a single object for an element that contains both elements, unless you want the header to be a separate component - then defining that as a component would be useful.



//these template values can come from external files as well
const Page1 = {
  template: '&lt;div&gt;Page 1&lt;/div&gt;'
}
const Page2 = {
  template: '&lt;div&gt;Page 2&lt;/div&gt;'
}
const Page3 = {
  template: '&lt;div&gt;Page 3&lt;/div&gt;'
}
const routes = [{
    path: '/page1',
    component: Page1
  },
  {
    path: '/page2',
    component: Page2
  },
  {
    path: '/page3',
    component: Page3
  }
];
const router = new VueRouter({
  routes: routes
});

const viewApp = new Vue({
  el: "#app",
  router: router,
});
#page {
  margin: 30px 0;
}
&lt;script src="https://unpkg.com/vue@2.5.17/dist/vue.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/vue-router/dist/vue-router.js"&gt;&lt;/script&gt;
&lt;div id="app"&gt;
  &lt;div id="header"&gt;
    &lt;!-- use router-link component for navigation. --&gt;
    &lt;!-- specify the link by passing the `to` prop. --&gt;
    &lt;!-- `&lt;router-link&gt;` will be rendered as an `&lt;a&gt;` tag by default --&gt;
    &lt;router-link to="/page1"&gt;Page 1&lt;/router-link&gt;
    &lt;router-link to="/page2"&gt;Page 2&lt;/router-link&gt;
    &lt;router-link to="/page3"&gt;Page 3&lt;/router-link&gt;
  &lt;/div&gt;

  &lt;div id="page"&gt;
    &lt;!-- route outlet --&gt;
    &lt;!-- component matched by the route will render here --&gt;
    &lt;router-view&gt;&lt;/router-view&gt;
  &lt;/div&gt;

  &lt;div id="footer"&gt;
    Footer
  &lt;/div&gt;
&lt;/div&gt;