0xD34F

Стили для раскрашивания клеток:

.black { background: black; }
.white { background: white; }

Размеры доски:

const rows = 8;
const cols = 8;

Создавать доску можно через генерацию разметки:

document.querySelector('.info').innerHTML = `
  <table>${Array.from({ length: rows }, (_, i) => `
    <tr>${Array.from({ length: cols }, (_, j) => `
      <td class="${(i ^ j) & 1 ? 'black' : 'white'}"></td>`).join('')}
    </tr>`).join('')}
  </table>`;

Или, создавая её элементы напрямую:

const table = document.createElement('table');

for (let i = 0; i < rows; i++) {
  const tr = table.insertRow();
  for (let j = 0; j < cols; j++) {
    tr.insertCell().classList.add([ 'white', 'black' ][(i ^ j) & 1]);
  }
}

document.querySelector('.info').append(table);

например

Анимируйте элементы независимо, вместо общего селектора передавайте в to конкретный элемент. Например:

const
  ease = Power0.easeNone,
  yoyo = true;

document.querySelectorAll('svg').forEach((n, i) => {
  const
    TopWave = new TimelineLite(),
    el = n.querySelector('.wave'),
    delay = i * (1 + Math.random() * 2);

  TopWave
    .to(el, 8, { delay, morphSVG: '.wave-one',   yoyo, ease })
    .to(el, 7, { delay, morphSVG: '.wave-two',   yoyo, ease })
    .to(el, 8, { delay, morphSVG: '.wave-three', yoyo, ease,
      onComplete: () => TopWave.restart()
    });
});

computed: {
  coordinates() {
    return this.$store.getters[`currency/${this.type}`];
  },
},

UPD.

передаю type: <component :type=" 'string' "></compontent>

А зачем такие сложности? Достаточно просто type="string".

.test1, .test2, .test3 - убрать цифры, пусть везде будет просто .test

const wrapper = document.querySelector('.wrapper');

wrapper.addEventListener('click', ({ target: t }) => {
  const { test } = t.dataset;
  if (test) {
    const toRemove = Array
      .from(t.closest('.test').children, n => n.dataset.test)
      .filter(n => n !== test);

    wrapper.classList.remove(...toRemove);
    wrapper.classList.toggle(test);

    document.querySelector('#classlist').innerHTML = wrapper.classList;
  }
});

Укажите tickFormat для xAxis:

.tickFormat(d3.timeFormat('%d %B'))

UPD. Дату надо указывать в миллисекундах, домножьте свои значения на 1000.

Какое-то отдельное свойство для самого канваса не нужно - он доступен через ref.

Контекст - получаете после монтирования:

<canvas ref="canvas"></canvas>

data: () => ({
  ctx: null,
}),
mounted() {
  this.ctx = this.$refs.canvas.getContext('2d');
},

Ну и используете его:

methods: {
  updateCanvas() {
    const { ctx } = this;
    ...

Начать следует с получения из json'а массива:

const { items } = JSON.parse(json).response;

Дальше два пути.

Первый - собираем html:

const html = `
  <tbody>${items.map(n => `
    <tr>
      <td>${n.title}</td>
      <td>${n.director}</td>
      <td>${n.year}</td>
      <td>${Object.values(n.photo).map(m => `<img src="${m}">`).join('')}</td>
    </tr>`).join('')}
  </tbody>
`;

Который затем добавляем в таблицу:

$('#example').append(html);
// или
document.querySelector('#example').insertAdjacentHTML('beforeend', html);

Второй - создаём элементы напрямую:

items.forEach(function(n) {
  const tr = this.insertRow();
  tr.insertCell().textContent = n.title;
  tr.insertCell().textContent = n.director;
  tr.insertCell().textContent = n.year;
  tr.insertCell().append(...Object.values(n.photo).reduce((acc, m) => (
    (acc[acc.length] = new Image).src = m,
    acc
  ), []));
}, document.getElementById('example').createTBody());

например

пробросить метод компонента Menu в качестве параметра компоненту Button

Не надо так.

Пусть Button генерирует событие клика, на которое вы подпишитесь в App и в обработчике измените какое-то свойство, которое в качестве параметра передаётся в Menu, где вы в зависимости от значения этого параметра будете предпринимать нужные действия (пример). Накрайняк - поставьте ref на экземпляр Menu и в обработчике клика напрямую дёргайте интересующий вас метод (пример).

preg_match_all('/\-?\d+/', $str, $matches);
$numstr = implode(' ', $matches[0]);

например, jquery-ui datepicker:

$('input').datepicker({
  beforeShowDay: date => [ date.getDay() === 6 ],
});

или, air-datepicker:

$('input').datepicker({
  onRenderCell: (date, cellType) => ({
    disabled: cellType === 'day' && date.getDay() !== 6,
  }),
});

@media (max-width: 1024px) {
  .list-group-service {
    columns: 2;
  }
}

$('select').change(function() {
  console.log($(':selected', this).text());
});

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

это же мультиселект, и когда выбрано два элемента, то имена двух элементов и получаем, а мне нужно только тот который выбрали

$('select').on('click', 'option', function(e) {
  const $target = $(e.target);
  if ($target.is(':selected')) {
    console.log($target.text());
  }
});

или

let prevSelected = [];

$('select').on('change', function(e) {
  const selected = $(':selected', this).get().map(n => n.innerText);
  const newSelected = selected.find(n => !prevSelected.includes(n));
  prevSelected = selected;

  if (newSelected) {
    console.log(newSelected);
  }
});

const $popup = $('#popup_idea');
const $list = $('.list_idea');

$list.on('click', '.open_win_idea', function() {
  $popup.data('del', $(this).closest('li').index()).fadeIn();
});

$('.close_win_butt_yes').click(function() {
  $list.children().eq($popup.data('del')).remove();
  $popup.fadeOut();
});

$('.close_win_butt_no, .close_win').click(function() {
  $popup.fadeOut();
});

const str = $('.list li')
  .get()
  .map(n => $(n).text())
  .join(' ');

или

const str = Array
  .from(document.querySelectorAll('.list li'), n => n.innerText)
  .join` `;

или

const str = Array.prototype.reduce.call(
  document.querySelector('.list').children,
  (acc, n, i) => acc + (i ? ' ' : '') + n.textContent,
  ''
);

Во-первых, события не срабатывают - никакие и никогда. Срабатывают обработчики событий. Во-вторых - между "неправильно" и "не так, как мне бы хотелось" есть существенная разница, попытайтесь её осознать.

Метод setState - асинхронный. Хотите получить доступ к изменённому стейту - используйте коллбек:

this.setState({
  request: e.target.value,
}, () => console.log(this.state.request))

$('.list_idea').on('click', '.open_win_idea', function() {
  $(this)
    .closest('li')
    .find('p')
    .attr('contenteditable', (i, val) => val !== 'true')
    .focus();
});