0xD34F

$data = array_reduce(explode('/', $str), function($acc, $n) {
  list($key, $values) = explode('-is-', $n);
  $acc[$key] = explode('-or-', $values);
  return $acc;
}, []);

https://v2.vuejs.org/v2/api/#v-cloak

Не надо наследования. Делайте обёртку для основного компонента, которая будет передавать новый обработчик в качестве параметра. А основной компонент будет устанавливать переданный обработчик, или, если его нет, собственный. Например.

for (const num of array) {
  await ctx.reply(num);
}

https://jsfiddle.net/zvyxeu48/

Посчитать суммы соседних элементов можно так:

const sums = arr.reduce((acc, n, i) => (
  (i & 1) || acc.push(0),
  acc[acc.length - 1] += n,
  acc
), []);

// или

const sums = arr.reduce(
  (acc, n, i) => (acc[i / 2 | 0] += n, acc),
  Array(Math.ceil(arr.length / 2)).fill(0)
);

// или

const sums = Array.from(
  { length: arr.length / 2 + arr.length % 2 },
  (n, i) => arr[i * 2] + (arr[i * 2 + 1] || 0)
);

// или

const sums = eval(`[${arr}]`.replace(/(\d+),(\d+)/g, '$1+$2'));

А собрать из массива строку так:

const result = sums.join(' ');

// или

const result = sums.reduce((acc, n) => acc + (acc && ' ') + n, '');

// или

const result = ''.concat(...sums.flatMap((n, i) => i ? [ ' ', n ] : n));

// или

const result = String(sums).replace(/,/g, ' ');

const { function1, function2 } = (function() {
  function unsafe() {}

  return {
    function1() {},
    function2() {},
  };
})();

Можно ли получать высшее образование, не имея среднего? Очевидно, нет. А осваивать фронтенд-фреймворк, не имея базовых знаний html/js? Судя по показанному коду, вы не в курсе, что атрибуты id должны иметь уникальные значения (<span id="wrong"> в шаблоне компонента - а если экземпляров компонента будет несколько?), путаетесь с операторами - использовали побитовое ИЛИ там, где должно было быть логическое. Может, стоит подождать с vue и подтянуть основы?

А если отвечать непосредственно на ваш вопрос... Ну, держите.

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

Object.assign({}, ...Object.values(obj).flat())

Вариант раз, размер шрифта делаем свойством компонента, ну и v-model + watch:

data: () => ({
  size: ...
}),
watch: {
  size: {
    immediate: true,
    handler(val) {
      fontSize(this.target, val);
    },
  },
},

<input type="range" v-model="size">

Вариант два - слушаем событие input:

methods: {
  onInput(e) {
    fontSize(this.target, e.target.value);
  },
},
mounted() {
  this.$el.querySelector('input').dispatchEvent(new Event('input'));
},

<input type="range" @input="onInput">

const isPositiveInteger = RegExp.prototype.test.bind(/^\d+$/);

// или

const isPositiveInteger = str =>
  !(!str || str.replace(/\d/g, ''));

// или

const isPositiveInteger = str =>
  Boolean(str) && !str.match(/\D/);

Нужна именно регулярка, т.к. числа большой длины.

Нет, не "т.к.". Т.к. строку можно проверить и без регулярных выражений:

const isPositiveInteger = str =>
  str !== '' && [...str].every(n => Number.isInteger(+n));

// или

function isPositiveInteger(str) {
  for (const n of str) {
    if (!'0123456789'.includes(n)) {
      return false;
    }
  }

  return str.length > 0;
}

// или

function isPositiveInteger(str) {
  let result = !!str;

  for (let i = 0; i < str.length && result; i++) {
    const n = str.charCodeAt(i);
    result = 47 < n && n < 58;
  }

  return result;
}

const containerSelector = '.form-fields';
const itemSelector = `${containerSelector} .wrapper-from-field`;
const activeClass = 'active';
const toggle = item => item
  .closest(containerSelector)
  .querySelectorAll(itemSelector)
  .forEach(n => n.classList.toggle(activeClass, n === item));

document.querySelectorAll(itemSelector).forEach(function(n) {
  n.addEventListener('change', this);
}, e => toggle(e.currentTarget));

// или

document.addEventListener('change', e => {
  const item = e.target.closest(itemSelector);
  if (item) {
    toggle(item);
  }
});

берёте moment.js и: moment(dateStr, 'MMM D, YYYY at hh:mm A').unix()

или, если подрезать строку, можно будет обойтись без сторонних библиотек:

Date.parse(dateStr.replace('at', '')) / 1000

const getCard = button => $(`#card${button.id.match(/\d+/).pop()}`);

$('[id^="button"]').hover(
  e => getCard(e.target).fadeIn(),
  e => getCard(e.target).fadeOut(),
);

или

const $buttons = $('[id^=button]').hover(function(e) {
  this.eq($buttons.index(e.target))[e.type === 'mouseenter' ? 'fadeIn' : 'fadeOut']();
}.bind($('[id^=card]')));

Правильный вариант: отказаться от использования jquery, и взять какой-нибудь готовый компонент для vue. Можете заглянуть на awesome-vue, там есть список, может присмотрите себе что-нибудь.

Ну а так-то всё тривиально: вешаете ref на элементы, которые должны быть дейтпикерами; вешаете наблюдателя на массив с данными, в котором обходите элементы и инициализируете виджет там, где его нет:

<input ref="datepicker" v-model="item.date">

watch: {
  items() {
    this.$nextTick(() => {
      this.$refs.datepicker
        .filter(n => !n.classList.contains('hasDatepicker'))
        .forEach(n => $(n).datepicker({
          onSelect: () => n.dispatchEvent(new Event('input')),
        }));
    });
  },
},

Или можно директиву сделать:

<input v-datepicker v-model="item.date">

Vue.directive('datepicker', {
  inserted: el => $(el).datepicker({
    onSelect: () => el.dispatchEvent(new Event('input')),
  }),
});

Или даже целый компонент:

<v-datepicker v-model="item.date"></v-datepicker>

Vue.component('v-datepicker', {
  template: `<input :value="value" readonly="readonly">`,
  props: [ 'value' ],
  mounted() {
    $(this.$el).datepicker({
      onSelect: date => this.$emit('input', date),
    });
  },
});

Кстати, вам ещё в шаблоне надо будет добавить key в список пользователей.

Используйте динамическую привязку значения.

Само значение собирайте с использованием обычных javascript-выражений:

:src="`/img/${imgName}.jpg`"

или

:src="'/img/' + imgName + '.jpg'"

Также можно сделать вычисляемое свойство, если imgName является свойством компонента:

computed: {
  imgSrc() {
    return `/img/${this.imgName}.jpg`;
  },
},

:src="imgSrc"

Или сделайте метод, если собирать путь к изображению требуется более чем в одном месте, с разными name'ами:

methods: {
  imgSrc: name => `/img/${name}.jpg`,
},

:src="imgSrc(imgName)"

Положить в стейт фильтры - массив объектов, содержащих имя свойства, по которому выполняется фильтрация, текущее значение, массив значений, доступных для выбора:

filters: [
  { field: 'bg', value: '', options: [ 'black', 'white' ] },
  { field: 'color', value: '', options: [ 'red', 'green' ] },
],

На основе этого массива создать элементы фильтров:

filters.map((n, i) => (
  <label>
    {n.field}:
    <select data-index={i} onChange={this.onChange}>
      <option value="">none</option>
      {n.options.map(n => <option>{n}</option>)}
    </select>
  </label>
))

onChange = e => {
  const index = +e.target.dataset.index;
  const value = e.target.value;

  this.setState(prevState => ({
    filters: prevState.filters.map((n, i) => index === i ? { ...n, value } : n)
  }));
}

Получить отфильтрованные данные:

const filteredData = filters.reduce((acc, n) => {
  return n.value
    ? acc.filter(m => m[n.field].includes(n.value))
    : acc;
}, data);

Вместо полных данных отобразить отфильтрованные.

Можно. Только это называется не "исполнение js", а компиляция шаблона. Смотрите Vue.compile.