Evgeny Kulakov

Vuex это же паттерн управления состоянием. Он дает понятные механизмы управления, по сути задает стандарт, единый подход, методологию. Это удобно, когда вы не один в проекте, когда проект развивается и растет. Без этого ваш подход через не которое время приведет к неизбежным костылям, более сложной управляемости, а еще через некоторое вы вообще перестанете понимать, что происходит)
Ну и минусы вашего подхода:
1. Жесткая связь с рутовым компонентом
2. Нет разделения на синхронные и асинхронные операции
3. Ну и вообще у вас только есть реактивность, а вуекс дает различные удобные механизмы типа модулей, наймспэйсов в них, для управления сложностью и возможностью к расширению.

В документации должно быть так: :href="results.id"

Было уже не раз)

1. проброс
2. vuex
3. eventbus

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

Думаю, что можно начать вот с этого примера: https://github.com/ratiw/vuetable-2-tutorial/tree/... там как раз пример кастомного шаблона для ячейчи таблицы, собственно в вашем варианте внутрь шаблона нужно ссылку поместить.

Поле вы генерируете, но ведь в теле запроса его нет.

...
.then( response => {
     this.loading = false;
     console.log(response);
   })
.catch(error => {
      console.log(error);
  });

Попробуйте так:

Vue.component('rules', {
  props: ['content'],
  data: function () {
    return {
      text: null
    }
  },
  mounted() {
    this.text = { ...this.content.rules}
  }
  template: '#rules'
});

<img :src="`some/path/${item.img}`">