0xD34F

data: () => ({
  selected: null,
  items: [
    { title:  'hello, world!!', value: '' },
    { title:  'fuck the world', value: '' },
    { title: 'fuck everything', value: '' },
  ],
}),

<div v-for="n in items">
  <label>
    <input type="radio" :value="n.title" v-model="selected">
    {{ n.title }}
  </label>
  <input type="text" v-model="n.value" :disabled="selected !== n.title">
</div>

При клике в первом компоненте делайте $emit выбранного значения / индекс кликнутого элемента / или что там у вас в родительский компонент, а оттуда в качестве параметра передавайте его во второй. Например.

const result = arr.reduce((acc, n, i) => {
  if (здесь вы проверяете элемент массива на соответствие своему условию) {
    let group = acc[acc.length - 1];
    if (!group || group.index !== i - 1) {
      group = { data: [] };
      acc.push(group);
    }

    group.index = i;
    group.data.push(n);
  }

  return acc;
}, []).map(n => n.data);

.fade-leave-active {
  transition: opacity 1s;
}

.fade-leave-to {
  opacity: 0;
}

mounted() {
  this.show = false;
},

$('#form [type="radio"]:enabled').eq(0).click();

return data.map(n => n.join(columnDelimiter)).join(lineDelimiter);

$('ul.list').on('click', 'li', function(e) {
  if (e.target === this) {
    $(this).children('ul').slideToggle();
  }
});

или

$('ul.list li').click(e => {
  e.stopPropagation();
  $('> ul', e.currentTarget).slideToggle();
});

Оставьте регулярное выражение как оно есть, и просто вырезайте первые сколько там вам надо символов:

phone.value = phone.value.replace(/[^+0-9]/g, '').slice(0, 11);

А вообще, возможно вам следует посмотреть в сторону уже готовых решений (например), вместо того, чтобы заниматься подобным велосипедостроением.

Это чё, в setInterval запихнули подключение обработчика keydown? Умно. Не нужен тут никакой setInterval.

Сам обработчик keydown слишком сложно выглядит - зачем в четырёх разных местах делать один и тот же вызов функции? Сначала меняете координаты, а в самом конце - дёргаете перерисовку.

Размер картинок - а если решите поменять? Или опечатаетесь где-нибудь? Сделайте константу.

Что касается рисования, то наверное, проще всего будет замостить холст фоновым изображением, а потом рисовать персонажа.

Как это всё может выглядеть:

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

const TILE_SIDE = 32;

let pickX = 0;
let pickY = 0;

const ground = new Image();
ground.src = 'Ground.png';
const pick = new Image();
pick.src = 'Pick.png';

document.addEventListener('keydown', function(e) {
  switch (e.keyCode) {
    case 87: pickY -= TILE_SIDE; break;
    case 65: pickX -= TILE_SIDE; break;
    case 83: pickY += TILE_SIDE; break;
    case 68: pickX += TILE_SIDE; break;

    default: return;
  }

  draw();
});

function draw() {
  for (let x = 0; x < canvas.width; x += TILE_SIDE) {
    for (let y = 0; y < canvas.height; y += TILE_SIDE) {
      ctx.drawImage(ground, x, y);
    }
  }

  ctx.drawImage(pick, pickX, pickY);
}

draw();

https://jsfiddle.net/fe7vL23u/

<div class="accordionFaq"></div>

const playersOptions = [
  { source: '...' },
  { source: '...' },
  ...
];

$('.accordionFaq').html(playersOptions.map((n, i) => `
  <div class="accordionFaq-item">
    <div class="accordionFaq-head js-accordionFaq-head">
      Video #${i}
    </div>
    <div class="accordionFaq-body">
      <div id="player${i}"></div>
    </div>
  </div>
`).join('')).on('click', '.accordionFaq-head', function(e) {
  const index = $(this).closest('.accordionFaq-item').index();

  $('.accordionFaq-item', e.delegateTarget).each(function(i) {
    const
      $this = $(this),
      isClicked = i === index,
      active = isClicked && !$this.hasClass('active');

    $(this)
      .toggleClass('active', active)
      .find('.accordionFaq-body')
      [isClicked ? 'slideToggle' : 'slideUp']();

    playersOptions[i].player[active ? 'play' : 'pause']();
  });
});

playersOptions.forEach((n, i) => {
  n.player = new Clappr.Player({
    source: n.source,
    parentId: `#player${i}`,
  });
});

Так же, как и в любой другой компонент. А примеры использования пропсов можете посмотреть в документации.

UPD. Глянул код - так у вас же часть работы уже сделана. Некоторые из компонентов уже принимает пропсы - Container, например, или Wrapper. Возьмём Wrapper - у него есть itemWidth и itemHeight. Ну и отлично:

<Wrapper itemHeight="300px">

Говорите, дефолтное значение надо? Ну так пусть вместо height: ${p => p.itemHeight}; будет height: ${p => p.itemHeight || '200px'};, например. Или можно переписать компонент так:

export const Wrapper = styled.article(({
  itemWidth,
  itemHeight = '200px',
}) => ({
  backgroundColor: '#efefef',
  margin: '5px',
  height: itemHeight,
  width: itemWidth,
}));

Свойство customPaging + стилизация.

Или просто стилизация, если кроме цифр ничего не надо - они там есть по умолчанию.

Так, что ли?

const ItemComponent = props => (
  <div>
    <p>{props.title}</p>
  </div>
);

...

<Carousel
  items={items}
  ItemComponent={ItemComponent}
/>

UPD. https://codesandbox.io/s/42p1q66589

str.replace(/(\(.*?\))/g, m => '2'.repeat(m.length))

При чём тут updated, я честно говоря не очень понял.

Оборачиваете свой контент в transition, вешаете key. Например.

{{#each month}}
  <option>{{@index}} {{this.[1]}}</option>
{{/each}}

var sizeEmpty = $('#checkout-form').find('.empty_field').size();

Вот как, size значит... Ясно:

Note: This method has been removed in jQuery 3.0. Use the .length property instead.