0xD34F

Вы обходите массив, проверяете совпадение имени - ну, отлично. А вот что не отлично - так это ветка else, где вы пишите в результат поиска, что ничего не найдено. Делать это надо один раз - после цикла, а не внутри. Для этого можете перед циклом объявить переменную, типа var found = false, в случае если совпадение найдено - устанавливаете её в true. А код из блока else выносите за цикл и оборачиваете в if (!found).

switch = !switch

Зачем вы решили использовать ключевое слово в качестве имени свойства компонента? Переименуйте.

происходит рендеринг двух разных списков

<transition name="fade">

Для списков надо использовать transition-group.

<li v-for="elements in myData" v-if="elements.key == getKey()">

Во-первых - не задан key. Во-вторых.

jsfiddle.net/p2c6y0bg

Article.find({
  publishedAt: { $gt: Date.now() }
})

const getCard = num => cards.find(n => n.id === num);
// ...
const card = getCard(cardRandom(1, 51));

Правда, не очень понятно, зачем такие сложности. Кроме того, непонятно, гарантируется ли существование объекта с указанным id. Может, лучше использовать случайное число как индекс? Типа так:

const card = cards[Math.random() * cards.length | 0];

const TYPES = {
  1: 'region',
  3: 'area',
  7: 'street',
};

const newItems = items.map(({ parents_names, parents_levels, ...n }) =>
  parents_names.reduce((acc, name, i) => (
    acc[TYPES[parents_levels[i]]] = name,
    acc
  ), n)
);

О каких классе, имени атрибута и значении идёт речь:

const className = 'element';
const attrName = 'data-attr';
const attrValue = 'this-element';

Если больше заранее ничего не известно, то собираем селектор и получаем элемент:

const elem = document.querySelector(`.${className}[${attrName}="${attrValue}"]`);

Если же вдруг уже была получена коллекция элементов с указанным классом...

const elems = document.getElementsByClassName(className);

// или

const elems = document.querySelectorAll('.' + className);

...то имеет смысл поискать в ней вместо всей страницы:

const elem = Array.prototype.find.call(
  elems,
  n => n.getAttribute(attrName) === attrValue
);

// или

let elem = null;
for (const n of elems) {
  if ((n.attributes[attrName] || {}).value === attrValue) {
    elem = n;
    break;
  }
}

// или

let elem = null;
for (let i = 0; !elem && i < elems.length; i++) {
  elem = elems[i].matches(`[${attrName}="${attrValue}"]`) ? elems[i] : elem;
}

Подсказали что правильно сделать через атрибут data-*

Ну да. Добавляете блокам такие же data-key, как у тех элементов, по клику на которые блоки надо показывать. По клику хватаете все блоки и показываете те, у которых data-key совпал с кликнутым, остальные скрываете:

$(document).on('click', 'a[data-key]', function() {
  $('div[data-key]')
    .hide()
    .filter((i, n) => n.dataset.key === this.dataset.key)
    .show();
});

Вопрос - а как вы используете myvalue? Если где-то в шаблоне, то v-if исправит ситуацию:

<div v-if="my_dates['2018-04-23']">{{ myvalue }}</div>

В противном случае есть смысл делать проверку на существование нужного свойства в my_dates и действовать по обстоятельствам, например так:

myvalue() {
  сonst date = this.my_dates['2018-04-23'];
  return date ? Number(date.april) + Number(date.may) : null;
}

свойство fillColor

Имеется довольно большая матрица (чем больше- тем лучше).
Как правильно отрисовать её на странице?
Хотелось бы еще и с нормальной частотой, хотя-бы раз в 50 ms.

Используйте canvas. При правильном подходе сможете добиться результата на порядок лучше, чем 50 миллисекунд.

не будет ли быстрее преобразовывать матрицу в строку через arr.toString()...

Не будет.

Картинка

Указывать состояния не нужно - цветового обозначения вполне достаточно. Кроме того, при небольших размерах клеток вы эти цифры либо не увидите, либо они не будут влезать в свои клетки (вы представьте, что отрисовываете матрицу хотя бы 300x300).

Инициализируйте экземпляр Vue один раз, при открытии страницы:

const vm = new Vue({
  el: '#table-box',
  data: () => ({
    items: [],
  }),
});

А в коллбэке ajax-запроса просто обновляйте данные:

success(data) {
  vm.items = data;
},

const index = str.search(/\d\D*$/);

// или

const index = str.replace(/\D*$/, '').length - 1;

// или

const index = [...str].reduce((max, n, i) => +n === +n ? i : max, -1);

// или

const index = +(Object.entries(str).filter(n => !isNaN(n[1])).pop() || [ -1 ])[0];

// или

let index = str.length;
while (--index >= 0 && !'0123456789'.includes(str[index])) ;

// или

const index = (function get(i, n = str.charAt(i)) {
  return i < 0 || !Object.is(n * 1, NaN)
    ? i
    : get(~-i);
})(~-str.length);

Вместо prepend используйте метод html.

Или, если внутри #imgTitle есть ещё какой-то контент, сначала удаляйте предыдущий img:

$('#imgTitle').find('img').remove().end().prepend(...

Так? Ну или кастомный фильтр можно сделать.

И еще почему всегда первый элемент в опций виден как undefined ?
И если убрать ng-model то 1-ая опций undefined не будет.

Открываем документацию, и видим, что

If the viewValue of ngModel does not match any of the options, then the control will automatically add an "unknown" option, which it then removes when the mismatch is resolved.

$('.mod__l').append(function() {
  return ({
    m1: mod__c1,
    m2: mod__c2,
    m3: mod__c3,
  })[$('.mod__input', this).data('mod')];
});

замените

:style="{width: this.width, height: this.cavh}"

на

v-bind="{ width: width, height: cavh }"

или

:width="width" :height="cavh"

Помогите пожалуйста понять почему следующий код выводит undefined, а не 5

Выводит где? Как вы этот код запускали? Раз уж вы решили скрыть эту информацию...

Ответ номер раз: а чо вы врёте-то? Открываем консоль, копируем код, запускаем и видим, что выводится 5.

Ответ номер два: jsfiddle, например, по умолчанию оборачивает код в window.onload, соответственно, переменная b в window не попадёт - потому и undefined. (UPD. Исправили эту дичь).

Кусок кода, который в этом виноват:

$(document).mouseup(function (e) { 
    var popup = $('#free_moto_lesson');
    if (e.target!=popup[0]&&popup.has(e.target).length === 0){
        $('.overlay').fadeOut();
        $(popup).fadeOut();
    }
    return false;
});

А конкретно - return false.

Вместо keypress обрабатывать следует событие input. Вписывать руками значение (в смысле - через element.value) в элемент не надо, пусть этим v-model занимается. Сама логика замены символов - дико переусложнено, разбирать смысла не вижу. Вот вам исправленный вариант.

Нужно ли выносить в отдельный компонент это?

Да. Рекурсивный компонент. Для вложенных данных компонент создаёт экземпляры самого себя. Условие продолжения рекурсии (рендеринга конкретного экземпляра компонента) - корректность данных, надо проверять, что в компонент был передан массив ненулевой длины. Например:

name: 'v-tree',
props: [ 'items' ],

<ul v-if="Array.isArray(items) && items.length">
  <li v-for="n in items">
    {{ n.name }}
    <v-tree :items="n.children" />
  </li>
</ul>