Gennadiy Balachkov

Бегло просмотрел комменты и не увидел предложения использовать директиву v-once.

Однократно рендерит элемент или компонент. При повторном рендеринге он, а также все его потомки, рассматриваются как статический контент и пропускаются. Это поможет увеличить производительность обновлений.
https://ru.vuejs.org/v2/api/#v-once

Во vuejs нет "основного кода" . Весь функционал реализуется через компоненты, дерево которых начинается импортироваться с файла App.vue. И никак иначе, никак не лучше, только так)

Компонента выводится таким образом

import Vue from 'vue'
// В Example.vue есть <template><div>TEST</div></template>
import Example from './components/Example.vue'

new Vue({
    el: '#example',
    template: '<Example/>',
    components: {Example}
});

В main файле:

import Vue from 'vue'
import App from './App.vue'
import Other from './Other.vue'

new Vue({
  el: '#app',
  template: '<App/><Other/>',
  components: {
    App: App,
    Other: Other
  }
})

App и Other - компоненты, в них уже свой контент

<template>
  <div id="app">
    Hello
  </div>
</template>