Некоторые ссылки в нашем приложении пока ведут в никуда и единственная реакция на щелчок по ним - это сообщение в консоли, что не особо информативно, исправим этот недочёт. Создадим новый компонент MessageDialog.vue и, не изобретая велосипедов, возьмём готовое решение для модального диалога из документации к Vuetify: https://vuetifyjs.com/ru/components/dialogs, немного его модифицировав:

<template>
    <v-layout row justify-center>
        <v-dialog
            v-model="dialog"
            persistent
            max-width="290"
        >
            <v-card>
                <v-card-title class="headline">{{ title }}</v-card-title>
                <v-card-text>{{ text }}</v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="primary" flat @click="dialog = false">Ok</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </v-layout>
</template>

<script>
    export default {
        data () {
            return {
                dialog: false,
                title: "",
                text: ""
            }
        }
    }
</script>

Подключите диалог, добавив в блок <script></script> файла App.vue строку import MessageDialog from './components/MessageDialog' и ниже в components: {} строку MessageDialog. Начало блока <sctipt></script> должно выглядеть следующим образом:

<script>
    import MessageDialog from './components/MessageDialog'
    import TOC from './components/TOC'

    export default {
        name: 'App',
        components: {
            MessageDialog,
            TOC
        },

В конец блока <v-app></v-app> добавьте строку <MessageDialog ref="MessageDialog" />, после чего останется только в коде скрипта добавить в секции .catch каждого обращения к Axios строки вызова нашего диалога с сообщением об ошибке:

.catch(error => {
    console.log(error);
    this.$refs.MessageDialog.title = "Ошибка";
    this.$refs.MessageDialog.text = error;
    this.$refs.MessageDialog.dialog = true;
});

Диалог с индикатором загрузки

При медленном соединении наше приложение будет загружать данные молча, ни коим образом не оповещая пользователя о том, что оно работает, это нехорошо, давайте выводить при загрузке индикатор. Создадим компонент LoadingDialog.vue как всегда воспользовавшись шаблоном vuetify:

<template>
    <div class="text-xs-center">
        <v-dialog
            v-model="dialog"
            hide-overlay
            persistent
            width="300"
        >
            <v-card
                color="primary"
                dark
            >
                <v-card-text>
                    Загружаю данные, ожидайте...
                    <v-progress-linear
                        indeterminate
                        color="white"
                        class="mb-0"
                    >
                    </v-progress-linear>
                </v-card-text>
            </v-card>
        </v-dialog>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                dialog: false
            }
        },

        watch: {
            dialog (val) {
                if (!val) return
            }
        }
    }
</script>

Предлагаю вам самостоятельно подключить его в App.vue, добавив нужные строки в блоки шаблона и скрипта. В шаблоне значение ref установите равным "LoadingDialog".

Справились? Теперь добавим код для отображения и скрытия диалога при загрузке файла в секцию mounted:

mounted () {
    this.$refs.LoadingDialog.dialog = true;

    this.axios.get("data/start.html")
        .then(response => {
            this.text = response.data;
            this.$refs.LoadingDialog.dialog = false;
        })
        .catch(error => {
            this.$refs.LoadingDialog.dialog = false;
            console.log(error);
            this.$refs.MessageDialog.title = "Ошибка";
            this.$refs.MessageDialog.text = error;
            this.$refs.MessageDialog.dialog = true;
        });

    this.$refs.LoadingDialog.dialog = true;

    this.axios.get("data/toc.json")
        .then(response => {
            this.$refs.TOC.items = response.data;
            this.$refs.LoadingDialog.dialog = false;
        })
        .catch(error => {
            this.$refs.LoadingDialog.dialog = false;
            console.log(error);
            this.$refs.MessageDialog.title = "Ошибка";
            this.$refs.MessageDialog.text = error;
            this.$refs.MessageDialog.dialog = true;
        });

    this.$watch(
        "$refs.TOC.active",
        (newVal, oldVal) => {
            if (newVal.length) {
            this.$refs.LoadingDialog.dialog = true;
            this.axios.get("data/id" + newVal + ".html")
                .then(response => {
                    this.text = response.data;
                    this.$refs.LoadingDialog.dialog = false;
                })
                .catch(error => {
                    this.$refs.LoadingDialog.dialog = false;
                    console.log(error);
                    this.$refs.MessageDialog.title = "Ошибка";
                    this.$refs.MessageDialog.text = error;
                    this.$refs.MessageDialog.dialog = true;
                });
            }
        }
    );
}

Всё, теперь во время загрузки данных мы будем видеть сообщение с бегунком.

P.S. Текст данной части можно взять тут: /data/id304.html

P.P.S. Финальную версию можно скомпилировать командой yarn build.

Добавление диалогов

Диалог с сообщением

Диалог с индикатором загрузки