0xD34F

const obj = arr
  .filter(n => n.status === 'approved')
  .reduce((p, c) => ({ ...p, message: `${p.message}\n${c.message}` }));

Или, собираем всё, а затем извлекаем, что потребуется:

const grouped = arr.reduce((acc, { status, message }) => {
  acc[status] = acc[status] || { status, messages: [] };
  acc[status].messages.push(message);
  return acc;
}, {});

Object.keys(grouped).forEach(n => grouped[n].messages = grouped[n].messages.join('\n'));


const obj = grouped.approved;

#a:hover + #b {
  display: block;
}

одно из вложенных свойств через v-model привязывается к чекбоксу
<...>
при попытке прописать v-if с использованием этого свойства, при его изменении ничего в DOM не меняется

Раз ничего не меняется, значит, на самом деле этого свойства изначально нет, оно добавляется через v-model, при первом изменении состояния чекбокса. А vue, как известно, не может обнаружить добавление свойства объекта. Так что это свойство, чтобы оно стало реактивным, должно изначально присутствовать в объекте, и, раз оно используется для задания состояния чекбоска, то пусть дефолтным значением будет false.

UPD. Или можно обновить используемую версию vue на 2.5.0 или выше, там v-model добавляет отсутствующие свойства как реактивные.

Так?

const result = []
  .concat(...Object.values(anyIcons))
  .filter(n => n.title.includes('wq'));

или

const result = [];

for (const k in anyIcons) {
  for (const n of anyIcons[k]) {
    if (n.title.indexOf('wq') !== -1) {
      result.push(n);
    }
  }
}

1. Вместо name должен быть id.

2. Надо отменять действие по умолчанию.

$('a[href^="#"]').click(function(e) {
  e.preventDefault();
  const selector = $(this).attr('href');
  const scrollTop = $(selector).offset().top;
  $('html').animate({ scrollTop }, 1100);
});

Например.

num |= 0xF << (sizeof(num) * 8 - 4);

Если вы полагаете, что i в момент выполнения a('.add_list > div')[i] будет равно 0, 1, 2, и т.д., то вы сильно ошибаетесь. Оно всегда будет равно 10. Объявите i с помощью let вместо var.

Ну и конечно, несколько странно пытаться что-то делать с элементом, в существовании которого вы не удостоверились. Проверку бы какую сделали, что ли. А лучше - изначально обрабатывать только то, что есть:

const items = document.querySelectorAll('.add_list > div');
const numItemsToUpdate = 10;
const update = (el, index) =>
  setTimeout(() => el.style.opacity = 1, index * 30);

Array.prototype.slice.call(items, 0, numItemsToUpdate).forEach(update);

// или

for (let i = 0; i < Math.min(items.length, numItemsToUpdate); i++) {
  update(items[i], i);
}

// или

for (const [ i, n ] of items.entries()) {
  if (i === numItemsToUpdate) {
    break;
  }

  update(n, i);
}

Можно так:

Math.floor(Date.now() / 1000);

Быстрее примерно в два раза.

UPD. Или можно, как вы говорите, "с погрешностью" - храните значение в переменной, обновляете с помощью setInterval:

let time = Math.floor(Date.now() / 1000);
setInterval(() => time = Math.floor(Date.now() / 1000), 1000);

https://jsfiddle.net/356pm4fh/

Замените

<Product product={this.props.product} />

на

{this.props.product.map(n => <Product key={n.id} product={n} />)}

{Object.keys(anyIcons).map(type => (
  <Category>
    <CategoryType>
      {type === 'people' && 'PEOPLE'} 
      {type === 'nature' && 'ANIMALS & NATURE'}
    </CategoryType>
    {anyIcons[type].map(icon => (
      <RedactorEmojiItem data={icon.code}>{icon.title}</RedactorEmojiItem>
    ))}
  </Category>
))}

Так как одновременно может быть активным только один класс - вместо нескольких булевых свойств сделать одно, которое будет хранить имя активного класса:

data: () => ({
  activeClass: '',
  ...
}),

<p :class="activeClass"></p>

Возможные имена классов сложить в массив, создавать элементы с помощью v-for, перебирая этот массив; по событиям mouseover/mouseout переключать значение активного класса:

data: () => ({
  classes: [ 'какой-то класс', 'ещё класс', ... ],
  ...
}),

<p
  v-for="n in classes"
  @mouseover="activeClass = n"
  @mouseout="activeClass = ''"
>

Похоже на то, что вам нужно?

const sum = arr =>
  arr.reduce((acc, n) => {
    Object.entries(n).forEach(([ k, v ]) => acc[k] = (acc[k] || 0) + v);
    return acc;
  }, {});

const result = sum(a);

Обходите массив, считаете все встреченные свойства/значения, оформляете это дело как computed свойство:

groupedItems() {
  return this.items.reduce((acc, n) => {
    for (const k in n) {
      acc[k] = acc[k] || {};
      acc[k][n[k]] = (acc[k][n[k]] || 0) + 1;
    }
    return acc;
  }, {});
}

Выводите с помощью v-for:

<div v-for="(group, groupName) in groupedItems">
  <h3>{{ groupName }}:</h3>
  <div v-for="(value, key) in group">{{ key }} ({{ value }})</div>
</div>

Неправильно импортируете MyCalendar (это в Hello.js). Должно быть

import MyCalendar from './MyCalendar';

вместо

import { MyCalendar } from './MyCalendar';

В качестве events передаёте какую-то непонятную функцию вместо массива (это в MyCalendar.js).

Так:

methods: {
  onClick1() {
    alert('button1 clicked');
  },
  onClick2() {
    this.$refs.button.click();
  },
},

<button @click="onClick1" ref="button">button1: click me</button>
<button @click="onClick2">button2: click button1</button>

??

JSON.stringify(user, (k, v) => v instanceof Function ? v.toString() : v)

А чем setTimeout не устраивает? Добавить переменную, отвечающую за количество отображаемых элементов, если её значение меньше общего количества элементов - сделать ей ++ с задержкой. Как-то так.