Aetae

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. написать совой велосипед - так у вас будет кусочек кода подходящий именно вам, и плевать на нативность, чай не тысячами путей ворочаем.

Проверяйте предварительно document.readyState. Если состояние нужное - вызываете сразу, иначе - уже ожидаете DOMContentLoaded.

Это грустные реалии typescript. При сборке вебпаком всё соберётся нормально, а вот для того чтобы IDE такое скушала - нужна персональна декларация(.d.ts) на каждый sass файл или общая но не информативная вида:

declare module '*.scss' {
  const scss: any;
  export default scss
}

, чтоб он знал какие там где типы.

Можно для автоматизации использовать такие штуки, но это всё такие костыли...

По моему что-то вы делаете не так.
Имитируя клик, очевидно стоит передавать полноценный объект события, хотя-бы так:
$emit('click', new MouseEvent('click'))
События оно же не само по себе, код из события много что взять может.

Потому что вы задаёте строку напрямую в коде. Из кода описание строки вида '{ foo: "b\"ar" }' превращается в памяти в строку { foo: "b"ar" } после чего JSON.parse, пытаясь её распарсить, естественно, спотыкается.
Когда вы получаете ajax ответ от сервера вида { foo: "b\"ar" } сразу строкой, он именно таком виде и идёт в память.
Если хотите получить строку содержащую символы экранирования - эти символы также надо заэкранировать:

blocks: JSON.parse('[{"type":"header","data":{"text":"Тест","level":1}},{"type":"paragraph","data":{"text":"Тут вот <a href=\\"https://wordpress.org/plugins/woo-variations-style-buttons/\\">ссылка</a>."}}]')

Можно clip-path, можно filter(matrix преобразующий альфу для конкретного цвета), можно mix-blend-mode.
Можно не вырезать дырку, а просто сделать div с очень большой полупрозрачной тенью, border или outline...
Можно использовать несколько background-image.
Ну или тупо 4 блока, как предложил xmoonlight .