Как реализовать компонент крошки в vuejs?

Question

ПРИМЕЧАНИЕ. Я не использую Vue-Router.

Я хочу, чтобы простая хлебная крошка отслеживала, на какой странице / компоненте находится пользователь, пока я его реализовал, и он работает нормально, он не очень чистый. Было бы хорошо, чтобы получить некоторые идеи, и, возможно, превратить это в небольшую библиотеку ...

В моем компоненте одного файла:

<template>
    <div>
        <vk-breadcrumb>
                <vk-breadcrumb-item v-show="currentView === 'Modal' || 'Purposes' || 'Vendors'" v-on:click="$emit('change-view', 'Modal')" href="#">Home</vk-breadcrumb-item>
                <vk-breadcrumb-item v-show="currentView !== 'Modal'" v-on:click="$emit('change-view', 'Purposes')" href="#">Purposes</vk-breadcrumb-item>
                <vk-breadcrumb-item v-show="currentView === 'Vendors'" v-on:click="$emit('change-view', 'Vendors')" href="#">Partners</vk-breadcrumb-item>
        </vk-breadcrumb>
    </div>
</template>

<script>
export default {
  props: ['currentView'],
}
</script>

А потом я просто передаю представление в качестве опоры от родителя / корня:

<app-breadcrumb v-bind:current-view="currentView" v-on:change-view="updateView"></app-breadcrumb>

Было бы неплохо, чтобы это было более динамичным:)