Aetae

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

Можно, если им явно не указать тип Args, но тогда вы теряете предварительную проверку, увы:

let a1 = {
    channelID: {
        RegExp: ["\\d+", true],
        description: "d1"
    },
    content: {
        RegExp: [".+", true],
        description: "d2"
    }
};
type T1 = {[K in keyof typeof a1]: string}

Чтобы сохранить проверку - придётся воспользоваться дополнительной бессмысленной функцией для уточнения типа:

type Args = {
    [key: string]: {
        RegExp: [string, boolean],
        description: string
    }
}
function createArgs<T extends Args>(args: T): T {
    return args;
}

type TStringKeys<T extends Args> = {[K in keyof T]: string};


let a1 = createArgs({
    channelID: {
        RegExp: ["\\d+", true],
        description: "d1"
    },
    content: {
        RegExp: [".+", true],
        description: "d2"
    }
});

type T1 = TStringKeys<typeof a1>

К сожалению на текущий момент(ts4.2.3) избавиться от функции-обёртки не получится.

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

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

arr.sort(function(a, b) {
  return b[1] - a[1];
})

Вообще это можно и в экселе делать.(хз правда как:)).

Доп инфа, если делаете для себя: эксель можно через ActiveX подключить в виндовый hta\jscript и проводить операции прям над xlsx файлом.

interface IOrder {
    date: string,
    docTypesName: string,
    docId: number,
    image: string,
    name: string,
    price: number,
    quantity: number,
    removed: number,
}

interface  IProduct {
    image: string,
    name: string,
    price: number,
    quantity: number,
}

interface IDocument {
    date: string,
    docId: number,
    docTypesName: string,
    products: IProduct[],
}

interface IElement {
    date: string,
    documents: IDocument[]
}

interface IElementMap {
    date: string,
    documents: Record<string, IDocument>
}

type IResultMap = Record<string, IElementMap>;

function f(orders: IOrder[]): IElement[] {
    const result = orders.reduce((accumulator, currentValue) => {
        const date = currentValue.date.split(' ')[0];

        if (!accumulator[date]) {
            accumulator[date] = {
                date,
                documents: {},
            }
        }

        if (!accumulator[date].documents[currentValue.docTypesName]) {
            accumulator[date].documents[currentValue.docTypesName] = {
                date: currentValue.date,
                docId: currentValue.docId,
                docTypesName: currentValue.docTypesName,
                products: [],
            }
        }

        accumulator[date].documents[currentValue.docTypesName].products.push({
            name: currentValue.name,
            price: currentValue.price,
            image: currentValue.image,
            quantity: currentValue.quantity,
        })

        return accumulator;
    }, {} as IResultMap)

    console.log('result', result);

    return Object.values(result).map(currentValue => {
        console.log('currentValue', currentValue);

        return {
            ...currentValue,
            documents: Object.values(currentValue.documents)
        }
    });
}

console.log(f(orders));

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

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

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

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

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

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

Достаточно представлять себе принципы и возможности, углубляться стоит по мере необходимости, как и со всем остальным. В мире слишком много всего, досконально всё это знать невозможно(если вы не супермен).
По вебпаку у меня несколько написанных плагинов, пара лоадеров, хитро-закрученные конфиги entry-point'ов с шарингом chunk'ов и множество использованных малоизвестных фич за плечам. Знаю ли я webpack? Нет, я не знаю webpack, в нём ещё тонна чего я не каслся. Но документация вот она, сорцы вон они, надо будет - разберусь.

line-height?

Потому что при каждом resize, если $(window).width() <= 768 ты добавляешь новый обработчк клика, не удаляя старый. Подёргай окно сто раз - будет сто раз срабатывать при клике.