0xD34F

https://jsfiddle.net/t4oc6kd3/

А зачем такие сложности? Пусть у вас будет индекс редактируемого элемента, ну и всё:

$scope.edit = function(index) {
  $scope.active = index;
};

ng-disabled="$index !== active"

overlay.addEventListener('click', function(e) {
  if ([ '#close-menu', 'li > a' ].some(n => e.target.matches(n))) {
    overlay.classList.remove('show-menu');
  }
});

const
  text = 'Sport',
  str = 'port';

console.log(text.replace(new RegExp(`(${str})`, 'g'), '#$1#'));

UPD.

или есть что-то оптимальней ?

Не знаю, что вы подразумеваете под словом оптимальней, но можно просто text.replace(str, `#${str}#`). Правда, в отличие от регулярки - множественную замену так сделать не получится.

a = array1.map.with_index{|n, i| '//' + array2[i] + n}.join(' or ')

switch(this.props.cardType) {

Нет, так не надо. Лучше сделайте объект, где ключами будут вот эти cardType, а значениями - вынесенные в отдельные компоненты куски кода из case'ов. Тогда логика выбора что рендерить сократится до... В общем, совсем коротко и просто получится:

const Component = components[this.props.cardType];
return Component && <Component {...this.props} />;

https://jsfiddle.net/ptm0zay7/1/

Используйте ref. В шаблоне, например:

<div data-bullshit-attribute="hello, world!!" ref="div"></div>

В коде:

const attrValue = this.$refs.div.getAttribute('data-bullshit-attribute');

Одно непонятно - а какого чёрта сразу не положить нужное значение в data, зачем атрибут читать?

const caesar = (str, offset) => Array
  .from(str, n => String.fromCharCode(n.charCodeAt(0) + offset))
  .join('');

const caesarTemplate = (title, offset) => `
  <div class="caesar">
    <textarea class="caesar-input" data-offset="${offset}"></textarea>
    <hr>
    <p>${title}: <span class="caesar-output"></span></p>
  </div>
`;

document.addEventListener('input', ({ target: t }) => {
  if (t.matches('.caesar-input')) {
    const output = t.closest('.caesar').querySelector('.caesar-output');
    output.innerHTML = caesar(t.value, +t.dataset.offset);
  }
});

document.body.insertAdjacentHTML('beforeend', [
  [        'Шифр',  3 ],
  [ 'Расшифровка', -3 ],
].map(n => caesarTemplate(...n)).join(''));

const text = (el => (el.innerHTML = html, el.innerText))(document.createElement('div'));

или

const text = new DOMParser().parseFromString(html, 'text/html').body.textContent;

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

const fragment = document.createRange().createContextualFragment(html);
const iter = document.createNodeIterator(fragment, NodeFilter.SHOW_TEXT);
const texts = [];
for (let n; n = iter.nextNode(); texts.push(n.nodeValue)) ;

Не надо ничего очищать. Пусть у каждого элемента будут собственные options. В шаблоне второго селекта меняете
v-for="o in getOptions2(index)" на v-for="o in user.options"; в обработчик change первого селекта передаёте текущий объект: @change="changeUser(user)", и соответственно, полученные данные кладёте в этот объект вместо options2 (их просто вырезаете):

changeUser(user) {
  fetch('https://jsonplaceholder.typicode.com/photos')
    .then(r => r.json())
    .then(d => this.$set(user, 'options', d));
},

Уберите слэши, они тут не нужны - просто new RegExp(tags, 'gi').

Сделать функцию, которая будет принимать в качестве параметров элемент/селектор и текст, который надо отобразить. Как-то так.

И зачем тут регулярные выражения? Если у вас число - то и проверяйте его как число. Трёхзначное число, начинающееся с 3 - это >= 300 и < 400.

Но вообще - 3\d{2}. Или ^3\d{2}$. Или \b3\d{2}\b. В зависимости от того, каковы входные данные, и что надо получить в результате.

Потому что нечего находить - ваш шаблон не существует в DOM-дереве (при сборке компилируется в render-функцию); искать элементы вы пытаетесь в хуке created, это слишком рано, создание экземпляра vue и его монтирование происходит не единовременно - используйте хук mounted.

В хуке App.vue выглядит не очень уместно, хочется вынести эту логику в другое место.

Это какую такую логику? У вас там в created будет простой вызов экшена, это одна строка. Уместно, делайте.

UPD. Вынесено из комментариев:

Почему я не могу блокировать загрузку приложения до выполнения нужного мне действия (запрос на апи, возврат ответа и наполнение стора)?

Можете в своём main.js завернуть создание экземпляра vue в коллбек экшена, который загружает данные:

store.dispatch('получитьДанные').then(() => {
  new Vue({
    el: '#app',
    store,
    router,
    ...

Только пользователь ничего не увидит в процессе загрузки. А если инициировать загрузку данных внутри, можно показывать какой-нибудь прелоадер, пока данные не будут получены:

<div v-if="данные в хранилище есть">
  основной контент приложения
</div>
<div v-else>
  данные загружаются, надо подождать
</div>

Во-первых - никаких getElementById, ставьте ref на интересующий вас элемент.

Во-вторых - если вам надо сделать прокрутку в самый низ, не надо указывать какое-то определённое число. У элемента есть свойство scrollHeight.

Во-третьих - надо дождаться, пока будет показан дополнительный контент, и только потом выполнять прокрутку, т.е., используйте nextTick:

this.$nextTick(() => {
  const el = this.$refs.container;
  el.scrollTop = el.scrollHeight;
});

И второй вопрос, если у меня в реальном проекте при таком коде не спускается никак, потому что идет погрузка через вкладки и используется keep-alive.

Информации примерно 0. Что за вкладки, где используется keep-alive... Ничего непонятно.

Если в keep-alive завёрнуто ваше окно, то выполняйте проверку this.show и прокрутку (можно вынести этот код в отдельный метод, чтобы не дублировать) и в хуке activated.

UPD. https://codesandbox.io/s/vue-template-ow505

Вместо гамбургера отображается надпись "Меню"

Нужно подключить иконочный шрифт. Как это сделать - можете прочитать в документации.

Можно.

Только разберитесь, что это за штука такая, Object.assign, что делает. А то вы явно чего-то не до конца понимаете, судя по показанному коду. Ну и имейте в виду, что если какое-то из свойств payload отсутствует в стейте, то после добавления оно не будет реактивным.