Alex Pospeliri

А зачем ты коммитишь каждое изменение @drag ?, все что тебе нужно дождаться dragEnd и уже его коммитить.

А зачем ты используешь 'обычный' JS если у тебя Nuxt ?
document.querySelector -> для выбора элемента используй ref="superPuperMenu" (https://ru.vuejs.org/v2/api/#ref)
el.onclick -> @click="toggleMenu" (https://ru.vuejs.org/v2/api/#v-on)
add, remove class -> v-if="showMenu" (https://ru.vuejs.org/v2/guide/conditional.html#v-if)
Для красивого показа меню, тело меню оберни в transition и добавь анимацию.

Есть массив: {...}

{} - массив ???

В Router.js ты прописываешь роуты, и определяешь по каким роутам какие компоненты будут грузиться.
например в твоем случае.
path: '/ - соответствует компоненту (странице) main (Main.vue)
path: '/about - соответствует странице about (About.vue)
path: '/news - соответствует странице news (News.vue) -3я страница

И дальше большое кол-во как это можно сделать, зависит от задачи и макета .
1. через роуты скажем выбрав что-то в меню внутри блока ты попадешь на определенную 'новость'
path: '/news/:id'
2. или у тебя будет приходит с сервера список 'новостей', ты их будешь фильтровать
в computed и в зависимости от того что выберет пользователь показывать.
...

P.S. Накидай базовый шаблончик со страницами и статическими данными, будет не понятно, скинь посмотрим поправим ;)