0xD34F

На свойство компонента вешается наблюдатель, выполняющий обновление css-переменной. Например:

h1 {
  font-size: var(--h1-font-size);
}

<input v-model="fontSize" type="range">
<h1>hello, world!!</h1>

data: () => ({
  fontSize: 24,
}),
mounted() {
  this.$watch(
    'fontSize',
    val => this.$el.style.setProperty('--h1-font-size', `${val}px`),
    { immediate: true }
  );
},

Храните выбранные ответы в родительском компоненте, передавайте их в вопросы как параметры, при выборе ответа отправляйте его родителю.

вычисляемое свойство сделать, конечно же

Добавим элементам products свойство, которое будет указывать, присутствует ли товар в корзине. Для этого перепишем его следующим образом:

computed: mapState({
  products: state => state.product.all.map(n => ({
    ...n,
    isOrdered: state.order.all.some(m => m.id === n.id),
  })),
}),

Всё, можно блокировать кнопку: <b-button :disabled="product.isOrdered".
И показывать уведомление о покупке: <div v-if="product.isOrdered".

Если же не хотите изменять уже существующее вычисляемое свойство, можно сделать ещё одно:

computed: {
  isOrdered() {
    return Object.fromEntries(this.$store.state.order.all.map(n => [ n.id, true ]));
  },
},

В шаблоне, вместо product.isOrdered из предыдущего варианта, будет isOrdered[product.id].

UPD. Вот вам демо. Код немного отличается от вашего и от того, что выше в ответе, плюс добавлен роутер, но, полагаю, разберётесь, что к чему.

Данные уносите в vuex, параметр роута пробрасываете в компонент, в компоненте делаете вычисляемое свойство, где по id будете доставать из хранилища нужный объект.

Научим компонент работать с директивой v-model.

Добавим параметр value - индекс item'а, который надо показать:

props: {
  value: Number,
  ...

computed: {
  item() {
    return this.items[this.value];
  },
  ...

<transition name="slide-fade" mode="out-in">
  <div class="content" :key="value">
    <h2>{{ item.title }}</h2>
    <p>{{ item.text }}</p>
  </div>
</transition>

Чтобы сменить отображаемый item, будем отправлять в родительский компонент новый индекс:

methods: {
  next(change) {
    const len = this.items.length;
    this.$emit('input', (this.value + change + len) % len);
  },
  ...

<button @click="next(-1)">Prev</button>
<button @click="next(+1)">Next</button>

Ну а в родителе останется связать какое-то из его свойств с экземпляром компонента слайдера:

data: () => ({
  active: 1,
  ...

<v-slider
  v-model="active"
  ...

https://jsfiddle.net/5runc0db/

https://jsfiddle.net/Lvknuta1/

data: () => ({
  items: [ 'hello, world!!', 'fuck the world', 'fuck everything' ],
  focused: null,
}),

<div v-for="(n, i) in items">
  <input @focus="focused = i" @blur="focused = null">
  <span v-show="focused === i" v-text="n"></span>
</div>

https://jsfiddle.net/5sxkjatg/

Во-первых, интерполяция с атрибутами не работает, привязка значений осуществляется иначе.

Во-вторых - трогать $root НЕ НАДО. Хотите использовать внешнее значение - передавайте его в компонент как параметр или доставайте из хранилища.

у одного пять букв в названии, у другого три

освойте js, и подобные вопросы перестанут вас волновать

Копируете массив, меняете элементы местами, отправляете его родителю. Например.

Сделайте вычисляемое свойство, где будет производится объединение данных.

Кладём данные в vuex, компоненты списка сообщений и отдельного сообщения вешаем на разные роуты. Последний будет принимать id в качестве параметра и пробрасывать его в компонент. В самом компоненте добавляем вычисляемое свойство - по id из хранилища извлекается нужный объект. Например.

Рендерить элементы с задержкой:

data: () => ({
  items: [
    { show: false, ... },
    { show: false, ... },
    ...
  ],
}),
computed: {
  showItems() {
    return this.items.filter(n => n.show);
  },
},
mounted() {
  this.items.forEach((n, i) => setTimeout(() => n.show = true, i * 1000));
},

<transition-group name="fade">
  <div v-for="n in showItems" :key="n.id">{{ n }}</div>
</transition-group>

:class="{ [`delay-${index}s`]: advantage.notThreeLines }"

<iframe :srcdoc="mailContent"></iframe>

Вы уже используете vuex, вот через него данные и гоняйте.

UPD. Вынесено из комментариев:

через Vuex я уже сделал, теперь хочу потренироваться на шине событий

"Потренироваться"? Вам это не нужно - вы же начинающий, а шина событий к применению давно уже не рекомендуется. Зачем вам учиться с использованием сомнительных и устаревших практик?

в чём моя ошибка понять не могу

"Ошибка"? Ошибки - у вас их целый ворох.

Если говорить о тех, из-за которых наблюдаемое поведение отличается от ожидаемого, то это: во-первых, передача данных до того, как экземпляр компонента (окно добавления события) создаётся; во-вторых, подписка на события в диалоговом окне в обработчике клика по кнопке добавления, а не при создании компонента.

Но кроме них есть и другие косяки - не удаляете обработчики событий при уничтожении экземпляра компонента; зачем-то передаёте элементы даты раздельно; в календаре подписываетесь на получение данных, отправляемых календарём же.

В общем, всё очень-очень плохо.

Весь текст, как я понимаю, находится в js-файле.

Не понимаете. Очевидно, вы не слышали про разделение представления и содержания. Никто никакие "таблицы из 50+ позиций", "записи из блогов" и т.д. в компоненты не зашивает. Данные подгружаются отдельно. И размещаются в заранее подготовленных местах.

То есть, вместо

<tr>
<tr>
...
<tr>

должно быть

<tr v-for="n in data">

loadData() {
  fetch(...).then(r => r.json()).then(r => this.data = r);
},