0xD34F

Какое-то отдельное свойство для самого канваса не нужно - он доступен через 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 elements = document.querySelectorAll('.list li');
// или
const elements = document.querySelector('.list').children;

Достаём:

const str = Array
  .from(elements, n => n.textContent)
  .join(' ');

// или

const str = ''.concat(...Array.prototype.flatMap.call(
  elements,
  (n, i) => [ i ? ' ' : '', n.innerText ]
));

// или

const str = [...elements].reduce((acc, n, i) => {
  return acc + (i ? ' ' : '') + n.innerHTML;
}, '');

// или

const str = (function get(i, n = elements.item(i)) {
  return n
    ? `${i ? ' ' : ''}${n.lastChild.nodeValue}${get(-~i)}`
    : '';
})(0);

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

Метод 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();
});

Vue.directive('emoji', (el, binding) => el.innerHTML = emoji(binding.value));

<div class="conversation_name" v-emoji="chatName"></div>

const chained = functions => initialArg => functions.reduce((arg, f) => f(arg), initialArg);

<div
  v-for="item in items"
  class="col-md-3 services-item"
  :class="{ hoverClass: item.hover }"
>
  <img :src="item.scr" alt="">
  <h3 class="my_services_title">Тест</h3>
  <button
    class="btn-price"
    @mouseenter="item.hover = true"
    @mouseleave="item.hover = false"
  >Нажать</button>
</div>

data: {
  items: [
    {
      src: 'img/laptop.png',
      hover: false,
    },
    {
      src: 'img/laptop.png',
      hover: false,
    },
  ],
},

UPD. Конечно, я затупил - как подсказывает в комментариях delphinpro, отдельные свойства hover не нужны, достаточно хранить индекс активного элемента.

Не нужен тут никакой each, обращаться к элементам непосредственно необходимости нет:

$('li, div, p', '#wrapper').attr('custom-attr', i => `test${i + 1}`);

Конечно, если не решите отказаться от jquery:

document
  .querySelector('#wrapper')
  .querySelectorAll('li, div, p')
  .forEach((n, i) =>  n.setAttribute('custom-attr', 'test' + -~i));

str.replace(/(\d+)(x)/g, '$1*$2')

success(response) {
  $('#api-wb').html(JSON.parse(response).loads.map(n => `
    <div class="item">
      <div><b>${n.title}</b></div>
      <div><a href="${n.comments_url}">comments (${n.comments_num})</a></div>
      <div><img src="${n.files[0].small}"></div>
    </div>
  `).join(''));
}