Vueのファイル分割について

いつもお世話になっております。

現在とあるVueを取り入れたプロジェクトを取り組んでおります。
当方、Vueを使用した案件は初めてなので、
初歩的ですが肥大化したコードのファイル分割をしたいと思っています。

以下のように複数の機能が１つのVueインスタンスに記述してしまったので、
ここから機能ごとにファイル分割をしようと思っているのですが、
どのように分ければ良いのでしょうか？

※現在は「モバイルメニュー開閉」「アコーディオン」「スムーススクロール」の
３つの機能が入っているので、これを別々のファイルに分割したいと思っています。

javascript
1
2/*  main.js  */
3
4// eslint-disable-next-line import/no-extraneous-dependencies import Vue from 'vue/dist/vue.esm'; import VueAwesomeSwiper from 'vue-awesome-swiper'; import 'swiper/swiper.scss'; import VueScrollTo from 'vue-scrollto';
5Vue.use(VueAwesomeSwiper); Vue.use(VueScrollTo, { offset : -100, cancelable: false });
6const app = new Vue({
7data() { return {
8  /* モバイルメニュー開閉 */
9  isOpen : false,
10  isReady: false,
11
12  /* アコーディオン */
13  isActive: 1
14
15};
16},
17mounted() { const el = document.getElementsByClassName('faq__a'); this.accordionToggle(el);
18this.isReady = !this.isReady;
19
20/* 別ページからのスムーススクロール */
21const { hash } = window.location;
22if ( hash ) {
23  this.scrollToHash();
24}
25},
26methods: {
27/*  別ページからのスムーススクロール  */
28scrollToHash() {
29  const { hash } = window.location;
30  this.$nextTick(() => {
31    this.$scrollTo(hash, 1000);
32  });
33},
34
35/*  モバイルメニュー  */
36toggleMenu() {
37  this.isOpen = !this.isOpen;
38},
39
40/*  アコーディオン  */
41accordionToggle(el) {
42  for ( let i = 0; i < el.length; i += 1 ) {
43    el[ i ].addEventListener('click', () => {
44      // todo アロー演算子でthisの挙動が変わったので、修正する
45      el[ i ].classList.toggle('active');
46      el[ i ].nextElementSibling.classList.toggle('active');
47    });
48  }
49}
50}
51});
52app.$mount('#app');