Klein Maximus

Используйте динамический роутинг и обрабатывайте полученный идентификатор - https://router.vuejs.org/ru/guide/essentials/dynam...

const routes = [
 {
    path: '/',
    name: 'Main',
    component: () => import('./views/Main.vue'),
  },
  {
    path: '/category',
    name: 'Category',
    component: () => import('./views/Category.vue'),
  },
  {
    path: '/:category',
    // ...
  }
]

Соответственно, при получении запроса ищете в api наличие категории :category. Если такой нет, показывайте ошибку 404.

// ...
computed: {
  processedHtml() {
    this.dropdown.forEach((item, name) => {
      window.console.log(this.content);
    })
  }
}
// ...

Необходимо использовать фукнцию render, так как возможностей template не хватает

Я сомневаюсь, что Вы использовали прямо все возможности шаблонов, и что рендер-функция так уж необходима. Скорее всего можно декомпозировать Ваш компонент на более мелкие и тогда логика станет проще. Но, это, конечно, зависит от задачи. Может быть в Вашем случае использовании рендер-функции необходимо.

все дочерние элементы просто пропадают,

Это логично! innerHTML просто перезаписывает всё дерево детей компонента.

Можно, конечно, извращаться путем вложения лишних тэгов span

Ну, только такой вариант :) При использовании директивы v-html тоже пришлось бы оборачивать свой html-код в тег.

https://jsfiddle.net/KleinMaximus/sohzx029/

Первое, и самое важное - не привязывайтесь к событиям DOM! Используйте обработчики событий Vue. Зачем с реактивными фреймворками типа Vue, React, Angular работать в стиле jQuery?

Уберите все из mounted(), кроме вызова dispatch.
Сделайте нормальную обработку событий.
В противном случае вся реактивность убивается.

И классы тоже надо выводить через computed свойства (на крайний случай через data), а не вставлять императивным методом.

<template>
   ...
   <button id="s" class="toggle-search" v-on:click="clear"></button>
   ...
</template>


export default {
  // ...,
  methods: {
    clear() {
      this.search = '';
    },
  },
  // ...,
};

Еще в store надо завести флаг статуса (не готов, готов, загружается, загружено...), чтобы соответствующим образом отображать всякие лоадеры, спиннеры и пр.. Думайте о пользователе сразу!

И советую подробно ознакомиться с документацией по Vue - она на понятном русском языке!