Aetae

Если не помогает e.stopPropagation - можно заюзать e.stopImmediatePropagation. :)
И это даже сработает. По своему.

Ещё можно вешать обработчики через кастомную обёртку над addEventListener, где вести учёт всех вешаемых обработчиков в привязке к элементу(или например к вручную задаваемой метке) и соответственно спокойно потом их удалять не зная функции.

Только вот проблема у вас в архитектуре.
Найдите причину, почему одинаковые обработчики навешиваются дважды и\или не учитывают переключения фокуса\контекста и исправьте её.

Т.е. vue у вас впердюлено на обычную страницу?

Ну, например, как-то так:

mounted() {
  this.app_id = +document.getElementById("app_id").innerHTML;
}

Ну вот смотри на примере той же button - каждый класс как-то модифицирует отображение кнопки. Каждый из этих классов может использоваться по отдельности и в любых сочетаниях. Ты просто один раз прописал эти классы, а дальше по необходимости накидываешь какие надо: одна кнопка так, другая эдак, ничего не дублируется ничего не надо заново выверять.
Как ты это собрался делать каскадом? Железно прописывать стили для каждой вложенности? Так завтра те бизнес скажет: "Передвинь кнопку на блок вниз и влево", и у тебя всё посыпется, придётся переписывать куски css. А после завтра попросят передвинуть весь блок и выровнять кнопку по правому краю. Опять всё переписывать.
Тащем абсолютно непродуктивно это.

Тут полноценный "мультик" на canvas. HTML, CSS и прочее тут особо не нужно, нужно знание мультипликации и умение оную в canvas впихнуть.)

let btn = $(this);
$ - jquery,
this - HTMLElement,
$(this) - объект jquery.

У объекта jquery нет свойства parentNode. У него есть метод parent().
parentNode есть у HTMLElement.

remove(), который вам советуют, есть и там и там, но лучше вам понимать что вы делаете, чем полагаться на удачные совпадения.

Константин Б. всё правильно сказал.
Но чисто для твоего понимания, как-то так это будет "выглядеть на vue":

<template>
  <div>
    ...
    <div id="shadow-dom" v-if="isTrueDomHidden"> ... </div>
    <div class="true-dom" :class="{'is-hidden': isTrueDomHidden}"> ... </div>
    ...
  </div>
</template>

<script>
export default {
  data() {
    return {
      mainFeed: [], // mainFeed должна получаться и забираться где-то в другом месте внутри vue
      isTrueDomHidden: true
    }
  },
  mounted() {
    if (this.mainFeed.length) setTimeout(() => {
      this.isTrueDomHidden = false;
    }, 2000);
  }
};
</script>

занимает всю ширину блока

Не занимает. Что довольно очевидно, иначе её растянуло бы во весь блок.
Ставьте background родителю. Ну или извращайтесь с box-shadow\border\padding по бокам и overflow:hidden родителю.

Псевдоэлементом:


Ещё можно фильром или градиентом, но не нужно.

А её нет, этой вашей декларации! *криповый смех*

Создатели этого модуля не потрудились сделать декларацию, те декларации что в @types поддерживаются сообществом на открытой основе(лежат вот тут), и туда тоже (пока?) никакой самаритянин не добавил ничего.
Так что вам остаётся только только сделать декларацию самому. Поможет вам в этом (при некоторой удаче) dts-gen.

Как обычно - абсолютный div поверх и перепроверять позицию на каждый чих.

Нет. Абсолютно позиционированный элемент полностью выпадает из потока. Только javascript'ом.

А зачем тебе? Какая у тебя есть для того железобетонная причина?
А так, ты всегда можешь добавить в цепочку сборки собственноручно написанный loader который выполнит любые нужные тебе преобразования.

Суть тут в том, что border нижнего span перекрывает border верхнего цветом фона, а в самом низу псевдоэлемент after благодаря разнице высоте и vertical-align отодвигает "перекрывающий" border ниже, открывая нужный нам.
Решение кажется довольно хрупким, но пока ничего иного на ум не пришло.

P.S. Обратите внимание, content не пустой, там zero width no-break space.

Может в phpstorm и есть что-то более магическое, но универсальное решение для любых нормальных редакторов: регулярное выражение:
<svg [\s\S]*?</svg>
Конкретно в phpStorm:
1. Ctrl(+Shift)+R;
2. галочку на Regexp;
3. Replace all.

Вообще регулярные выражения рекомендуется изучить - вещь незаменимая и очень упрощающая работу с любым текстом. И не смотрите что они страшные на вид: писать их гораздо легче чем читать.)

Всё работает:

var navItems = Array.from({length: 10}, (_, id) => ({
  id,
  title: 'ещё',
  children: []
}));
navItems.find(item => item.id === 5).children = navItems.slice(5, navItems.length);
console.log(navItems)

Возможно объекты у вас в получаемом navItems заморожены или просто свойство children имеет запрет на запись, проверьте:

var item = navItems.find(item => item.id === 5);
console.log(
  Object.isFrozen(item), 
  Object.getOwnPropertyDescriptor(item, 'children').writable, 
  Object.isFrozen(item.children)
)

Если заморожен только item или ограничена запись, но сам children не заморожен, то вместо замены children вы можете просто изменить его содержимое:

var children = navItems.find(item => item.id === 5).children;
children.splice(0, children.length, ...navItems.slice(5, navItems.length));

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

1. Нет. Зевс молнией вас не испепелит. Втыкать лишнее computed заради одного единственного вызова никакого смысла нет.
2. В хранилище должны быть только функции относящиеся к хранению данных. Некоторые пихают в store чуть ли не всю логику приложения, как по мне, так это форменное безумие.
У вас есть повторяющийся код связанный с работой с данными? Используйте миксины или вообще просто обычные отдельные js модули.
3. Маленькая.
4. Такой же как и без vue - аккуратная вёрстка с использованием разумной системы(БЭМ и пр.). Никакой излишне сложной логики в шаблоне быть не должно, а потому оная на это практически не влияет.
Для действительно сложной логики, способной превратить шаблон в кашу, используется render функция.

Твои требования уникальны, а значит в дикой природе не встречаются.
Так что качаешь сырцы jsPdf или pdfmake и потрошишь от всего что тебе не нужно. В размер скорее всего уложишься с запасом, он никто за тебя (бесплатно) это не сделает.

Chrome убрал исключённый из нового стандарта SVG path.pathSegList, но при этом не добавил path.getPathData() - предлагаемую этим стандартом альтернативу. Гениальный ход, надо сказать.
Так что варианты:
1. юзать полифил для pathSegList - так по крайней мере в фоксе оно будет работать нативно(до поры).
2. юзать полифил для getPathData() - так когда-нибудь везде заработает нативно(пока - нигде).
3. использовать какую-нить svg-либу общего назначения - так либа подумает за вас, а у вас в проекте будет лежать сотня-другая кило мусорного кода.
4. написать совой велосипед - так у вас будет кусочек кода подходящий именно вам, и плевать на нативность, чай не тысячами путей ворочаем.