Александр

Лучше спроси: Почему

не переопределяет из страницы. Выдает ошибку.

И продолжай биться головой о "Динамические компоненты".
Как связать кнопку и компоненты?
https://ru.vuejs.org/v2/guide/components-dynamic-a...

6 часов без ответов и комментариев )))
1)где вы создали директиву? В вне Vue проекта или в компонентах Vue?
2) Первое, допустим все ужасно, тогда мне кажется watch вам в помощь.

если например динамически добавить элемент в массив, который выведен с помощью v-for. Vue просто ингнорирует созданные на чистом JS блоки и начинается каша.

А во вторых, значит вы своей оберткой разрушаете template. Вам либо усложнять компонент или как то разделить логику на компоненты.
Не создавайте div, а сделайте его компонентом и отрисовываете в нем ваши динамические элементы.
Переменная false - рисуем там и так.
Переменная true - рисуем не там и по другому.

https://ru.vuejs.org/v2/guide/components-dynamic-a...

Где то на этом сайте даже примеры были )))

1) Перестало работать что?

Догадка:
2) "axios await async habr qna" в поисковике, тут есть ссылки как работает then. Асинхронность. Команда вроде выполнена, а значение будет потом.

Промисы меня немного бесят ))), но с ними интересно ломать голову.

Бросать вызов званию программиста и писать универсальную разметку. )))
Если сделать не возможно (?) смотри ответ bqio )))

PS
Давно же есть флекс...

1) Почитайте https://cli.vuejs.org/ru/config/
2) После команды build вы получаете готовый набор скриптов.
3) Почитаете про DOM объекты. В вашем примере el: '#app' говорит о том что надо запускать приложение в <div id=app></div> в вашем html файле

Пробовал переносить в файл вроде script.js и потом включать его в html

Напишете как вы это делали )))
а vue.js подключали?

Вот хочется ответить: "Возможно". Жирная точка. И больше ничего не писать.
Лучше ставить вопрос: "Как?".
Тогда тебе напишут:
Документация: https://github.com/axios/axios
В ней можно увидеть:

// Optionally the request above could also be done as
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });

Как начинающий любитель ...
Используя Promise будьте готовы не получить никаких данных ))) Сталкивался и до сих пор играю с кодом.
Да - нажали на кнопку @click="stateFilter('')"
Да - функцию вызвали stateFilter
НО в data вам только пообещали данные this.data = response.data.results;. Таблица не обновляется, ее нет еще. devtools показывает данные уже после окончательного рендеринга.

Что я не понимаю и мне не нравиться:
1. global_waiting_stop() что за обработчик? Зачем он там вообще нужен?

Я использовал computed, и вам наверное также стоит попробовать watch.
У меня проще: Я получаю данные на этапе mounted.
У вас сложнее. Надо что бы кнопка вызывала обновление данных и только после получения запускать this.$refs.table.refresh();
Если попробовать watch натравить на data и вызвать refresh.

UPD:
У вас две data как бы коллизии не было )))
И надо вроде data() { return {..data...}

Не совсем ответ, но может в эту сторону )))
Проверь
router-link-active - применяется когда ссылка активна
router-link-exact-active - применяется когда ссылка активна с точным соответствием пути
https://router.vuejs.org/ru/api/#active-class
Или добавляй класс к нужным тебе ссылкам

Не видя код компонента ... тяжело ))) для меня ))) и самому интересно ))) на callback функциях я встал )))
Почему
window.$axios.get....
А не
import axios from 'axios';
...
axios.get

callback функция не определена.... наверно объект не тот )))

Где то видел подобное, но не найду ....даже здесь вроде.
Там проверяли не keyХХХ, а проверяли change с задержкой и считывали уже набранный текст - "Если в течении 1 секунды после изменений текст не был изменен, то послать запрос"

Хоть ответы уже есть ....
https://github.com/tangbc/vue-virtual-scroll-list

v-for и тег template
https://ru.vuejs.org/v2/guide/list.html
template используешь как границы цикла

я только учусь )))
в туже степь что и Sergey Mukhin
Одно дело статичный файл
1.

Image: '/static/images/logo.png'
<img :src="Image">

"чистый" статик
2.

Image: require('/assets/images/logo.png')
<img :src="Image">

"вычисляемый", но все равно статик. dev и build соберут картинки в одном месте и добавят уникальный хэш в имени.
А другое дело вычисляемый "путь":
Боюсь придется придумывать инициализацию user.photo:
если их мало заранее присвойте переменным photoNNN через require. А потом вычисляйте user.photo передав объект photoNNN.

Как обновить DOM?
Удалить (очистить) и создать заново.
По умолчанию грузиться первые элементы Компонент1. Сработало событие - нужны новые данные. Замени Компонент1 на Компонент2 с заставкой "Загружаюсь" (или тот же Компонент1, но как то надо переменные разделить) и сразу после замены меняй обратно на Компонент1 , но Компонент1 должен получить следующую партию данных, следовательно надо предусмотреть AJAX -запрос с параметром который хранится вне Компонента1 (какая то глобальная переменная).