Aetae

У вас в вотчере стоит immediate: true, и, так как он задан на самом компоненте, вызван он будет сразу перед хуком created, когда vue-компонент уже создан но ещё не примонтирован. Соответственен никакого canvas на странице в этот момент нет.
Самое простое решение - добавлять вотчер не сразу, а в хуке mounted через this.$watch.

Технически можно, практически - нельзя. Она будет обновляться каждую перерисовку, и в vue вы перерисовку не контролируете, vue сам перерисовывает когда считает нужным. Можно предположить сколько и когда перерисовок будет, т.к. vue не рисует лишнего, но никаких гарантий.
Ну и в целом шаблон - он для отображения, любые изменения внутри оного - надругательство над самой идеей.

Плюрализация.

Чувак, это называется циклы.

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

Начнём с того, что вы не должны лезть внутрь компонента-ребёнка из компонента-родителя. Никогда. Компонент-ребёнок - это чёрный ящик. Вы не знаете есть ли в нём вообще firstChild и что там у него со scrollHeight. Не знаете, говорю, даже если сами тот компонент написали. Это основа компонентного подхода: содержимое любого компонента может быть полностью переписано без влияния на зависимые от него родительские компоненты. Любое управление осуществляется через props, события (и, в особых случаях, докуметированные публичные методы и свойства, получаемые через ref).

В данном случае вам нужно для ребёнка сделать компонент-обёртку(или поправить его самого), либо добавив свойство вроде set-height-by-child, которое и будет управлять данным поведением, либо, если нужна работа с этой высотой снаружи, посылать из него событие вроде @emit('scroll-height-changed', scrollHeight) при mounted, при изменении размера экрана и прочих возможных случаях.

Что вы пристали к этим директивам. Директивы - нишевая фича, нужная в специфических общих случаях. Если вы пишите директиву для одного компонента - вы делаете что-то не так(99%).

Так вот @transitionend="mymethod" должно работать само по себе, без лишних телодвижений. В крайнем случае @transitionend.native="mymethod" если цель - другой компонент.

this.$scopedSlots

// vue.config.js
module.exports = {
  publicPath: './'
}

v-html - только для обычного html. И то использовать надо только когда без него совсем никак.
Vue работает с данными, а не разметкой, разметка строится сама на основе данных.
В твоём случае в самом шаблоне должно быть:

...
<component :is="value">{{name}}</component>
...

А в data, соотвтественно:

...
{
  id: 2,
  name: this.$t("Email"),
  value: `LinkElement`
}
...

И всё же правильный ответ - передавать данные, рисовать на их основе. Передача разметки - это очень плохо.
Но если очень хочется: Vue.compile().

Основы js изучите, пожалуйста.

removeChild(items, child) {
  if(!Array.isArray(items) || !child) 
    return items;

  for(let i = items.length; i--;) {
    const { id, children } = items[i];
    
    if(id === child.id)
      items.splice(i, 1);
    else
      this.removeChild(children, child);
  }

  return items;
}

Ну потому что smooth. $nextTick - это не какое-то абстрактное "когда всё закончилось", это буквально следующий тик vue, который наступит через пару миллисекунд. smooth к тому времени только начнёт крутить.

А у тебя есть этот файл в ../assets/tag-example.docx на сервере? Скорее всего нет.