Aetae

Технически можно, практически - нельзя. Она будет обновляться каждую перерисовку, и в 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 ты добавляешь новый обработчк клика, не удаляя старый. Подёргай окно сто раз - будет сто раз срабатывать при клике.