Антон Антон

Связываться они должны по data-attr.

Это вам не к vue. В vue должно быть как-то так https://jsfiddle.net/fm4utx33/ (очень приближенно. на самом деле это скорее даже антипаттерн :) , но смысл тот, что ввод влияет на данные, а уже они влияют на отображение)
Ну и если табы не единообразны, то вот тут надо почитать и попереходить по ссылкам: https://ru.vuejs.org/v2/guide/routing.html

Если не использовать вебсокеты, то проще всего хранить дату последнего обновления списка и запрашивать её с фронта раз в несколько секунд. Если она больше той, что была при предыдущем запросе данных, то запрашивать список по новой.
Ну а если у нас есть возможность использовать вебсокеты, то тут проще (и одновременно сложнее). В простейшем случае приложение, которое вставляет данные и обслуживает вебсокеты - одно и то же. Тогда просто по сокетам шлем оповещение всем фронтам и они запрашивают обновленный список. Или шлем сразу изменения и фронты изменяют свои данные. При разделении приложения на части получается усложнение: при изменении данных шлем сигнал от той части, которая меняет данные к той части, которая обслуживает вебсокеты и она оповещает фронты. Ну, или интегрируем какую-нибудь систему управления очередями сообщений типа RabbitMQ. В общем, начинается простор для фантазии.

Вынести шаблон компонента из элемента в X-Template

Есть примеси

Не уверен, что заработает без серверного рендеринга с помощью самого vue, но можно попробовать https://ssr.vuejs.org/ru/hydration.html

Component template should contain exactly one root element

Например

<div>
  <banner></banner>
  <services></services>
</div>

При добавлении нового продукта в мутации надо присваивать свойству обновленный массив или пользоваться переопределенными методами для сохранения реактивности, об этом пишут в документации
В данном случае я бы отказался от хранения по ключам и добавил бы метод получения продукта по id через обход массива (если, конечно, продуктов там не тысячи)

нужно использовать props и emit https://jsfiddle.net/eLu0zevg/

Потому что по умолчанию у первой кнопки type = submit, а нажатие enter вызывает submit формы и вызывает обработчик и на кнопке. Для полного счастья надо указать у кнопки type="button", и указать модификатор prevent у keydown
https://jsfiddle.net/2kcLjsb3/
попробуйте удалить type у кнопки, и увидите в консоли вывод four.
то же самое, если убрать .prevent у keydown

https://bootstrap-vue.js.org/docs/setup/

А зачем это делать так, если можно в @click сделать $emit и уже в родителе прописать v-on:click, как делают все?

Документация для vuejs весьма неплоха.