0xD34F

document.addEventListener('click', e => {
  const slide = e.target.closest('.slide');
  if (slide) {
    const index = Array.prototype.indexOf.call(
      slide.parentNode.children,
      slide
    );
    console.log(index);
  }
});

или

for (const n of document.querySelectorAll('.slide')) {
  n.addEventListener('click', onClick);
}

function onClick() {
  let index = 0;
  for (let el = this; el = el.previousElementSibling; index++) ;
  console.log(index);
}

или

document.querySelectorAll('.slider').forEach(function({ children }) {
  [].forEach.call(children, (n, i) => {
    n.dataset.index = i;
    n.addEventListener('click', this);
  });
}, e => console.log(+e.currentTarget.dataset.index));

Считаем количество слайдов:

const slidesCount = this.slider.find('.slide').length;
// или
const { length: slidesCount } = this.slider.children();

Разметка одной точки:

const dotHTML = '<div class="slider-point"></div>';

Размножаем её:

const dotsHTML = Array(slidesCount).fill(dotHTML).join('');
// или
const dotsHTML = Array(slidesCount + 1).join(dotHTML);
// или
const dotsHTML = dotHTML.repeat(slidesCount);

И добавляем куда надо:

this.slider.siblings('.slider-pagination').append(dotsHTML);
// или
this.slider.closest('.slider-box').find('.slider-pagination').html(dotsHTML);

beforeMount() { // какой тут хук использовать?
  const fields = ['input1', 'input2']

  fields.forEach(item => this[item] = '') // я правильно добавляю в this, а не в this.$data?
}

Никакой хук не использовать. Всё неправильно.

С одной стороны, разницы нет, куда стучаться, к экземпляру, или к $data, т.к. последний представляет собой

Объект с данными, над которым экземпляр Vue осуществляет наблюдение. Экземпляр проксирует сюда вызовы своих полей. (Например, vm.a будет указывать на vm.$data.a)

С другой стороны, пытаться туда что-то добавлять бессмысленно, потому что

Vue не может обнаружить добавление или удаление свойства. Так как Vue добавляет геттер/сеттер на этапе инициализации экземпляра, свойство должно присутствовать в объекте data для того чтобы Vue преобразовал его и сделал реактивным.
<...>
Во Vue нельзя динамически добавлять новые корневые реактивные свойства в уже существующий экземпляр.

Массив сделайте:

data: () => ({
  inputs: Array(20).fill(''),
}),

<div v-for="(n, i) in inputs">
  Значение #{{ i }}:
  <input v-model="inputs[i]">
  {{ n }}
</div>

Передавайте в компонент списка обработчик клика, который будет данные кликнутого элемента сохранять. Эти сохранённые данные передавайте в компонент, где надо продублировать информацию. Как-то так.

Привяжите контекст (по аналогии с методами swipeStatus и keyboardHandler):

this.previousImage = this.previousImage.bind(this);
this.nextImage = this.nextImage.bind(this);

Исправьте поиск кнопок (они находятся на одном уровне с контейнером слайдов, от которого вы пляшете, так что сначала надо подняться на уровень выше или вместо find использовать siblings; и селекторы ещё неправильные):

this.prevBtn = this.slider.siblings(".slider-btn.previous");
this.nextBtn = this.slider.siblings(".slider-btn.next");

if($(this).children().is(':checked')){
  $(this).addClass('active');
} else {
  $(this).removeClass('active');
}

Подобный код имело бы смысл использовать, будь у вас чекбоксы. У радиокнопок же повторный клик не приводит к смене состояния - они всегда после клика будут checked. Так что класс добавлять надо без всяких проверок. И удалять тоже без проверок - но у соседей, а не кликнутого элемента. Т.е., правильно будет так:

$(this).addClass('active').siblings().removeClass('active');

const groupQuestions = arr => ({
  testId: arr[0].testId,
  questions: Object.values(arr.reduce((acc, n) => {
    const id = n.questionId;
    (acc[id] = acc[id] || {
      questionId: id,
      questionText: n.questionText,
      answers: [],
    }).answers.push({
      answer: n.answer,
      isRight: n.isRight,
    });
    return acc;
  }, {})),
});

const data = [
  {
    floors: [ 1 ],
    limits: [
      { f: 1.26, max: 120 },
      { f: 1.24, max: 140 },
      { f: 1.23, max: 160 },
      { f: 1.22, max: 200 },
      { f: 1.20, max: 260 },
      { f: 1.19, max: 300 },
    ],
  },
  {
    floors: [ 2, 3 ],
    limits: [
      { f: 1.00, max: 100, excludeMax: true },
      { f: 1.30, max: 130 },
      { f: 1.27, max: 160 },
      { f: 1.24, max: 200 },
      { f: 1.22, max: 300 },
    ],
  },
];

const d = data.find(n => n.floors.includes(floors.value));
if (d) {
  const v = area.value;
  console.log((d.limits.find(n => n.excludeMax ? n.max > v : n.max >= v) || { f: 1 }).f);
}

.todo-list-item.done  {
 text-decoration: line-through;
};

Точку с запятой внизу видите? Уберите.

this.setState({
    done: true
});

Может, стоит не тупо true назначать, а переключать текущее значение на противоположное?

<span className= {classNames} 
   onClick= {this.onLabelClick} >{ label }
   <button type="button"  onClick= {this.onMarkClick }

Вынесите кнопку за пределы span'а, чтобы клик по ней не запускал обработчик на span'е.

https://jsfiddle.net/cj25ukzd/

class App extends React.Component {
  state = {
    tasks: [
      {
        id: 1,
        title: 'title',
        description: 'description',
      },
    ],
  }

  createTask = () => {
    this.setState(({ tasks }) => ({
      tasks: [
        ...tasks,
        {
          id: 1 + Math.max(0, ...tasks.map(n => n.id)),
          title: 'title',
          description: 'description',
        },
      ],
    }));
  }

  render() {
    return (
      <div>
        <button onClick={this.createTask}>Добавить задачу</button>
        <ul>
          {this.state.tasks.map(({ id, title, description }) => (
            <li key={id}>id: {id} | {title} | {description}</li>
          ))}
        </ul>
      </div>
    );
  }
}

const grouped = Object.values(arr.reduce((acc, n) => {
  (acc[n.roomId] = acc[n.roomId] || { ...n, text: [] }).text.push(n.text);
  return acc;
}, {}));

Получаем остаток от деления на 10, или превращаем число в строку и смотрим на последний символ:

arr.filter(n => n % 10 === 4)
// или
arr.filter(n => ''.endsWith.call(n, 4))
// или
arr.filter(n => `${n}`.slice(-1) === '4')
// или
arr.filter(n => /4$/.test(n))
// или
(`${arr}`.match(/\d*4(?=\D|$)/g) || []).map(Number)

.icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  padding: 0.2em;
  width: 1.5em;
  height: 1.5em;
  border-radius: 100%;
  color: #fff;
  background: #0f0;
}
.icon::before {
  content: attr(data-char);
  font-size: 1em;
}

<a class="icon" data-char="¶"></a>
<a class="icon" data-char="X"></a>
<a class="icon" data-char="?"></a>

https://jsfiddle.net/6pzcmqwh/

const Block = ({ items }) => (
  <div className="info">
    <ul>{items.map(n => <li>{n}</li>)}</ul>
  </div>
);

class App extends React.Component {
  state = {
    items: [
      [  'hello, world!!',  '69' ],
      [  'fuck the world', '187' ],
      [ 'fuck everythign', '666' ],
    ],
    selected: null,
  }

  onClick = e => {
    this.setState({
      selected: +e.currentTarget.dataset.index,
    });
  }

  render() {
    const { items, selected } = this.state;

    return (
      <div>
        <div className="wrap">
          {items.map((n, i) => (
            <div
              className={`wrap__el ${i === selected ? 'active' : ''}`}
              onClick={this.onClick}
              data-index={i}
            >
              <Block items={n} />
            </div>
          ))}
        </div>
        <div className="result">
          {selected !== null ? <Block items={items[selected]} /> : null}
        </div>
      </div>
    );
  }
}

Есть варианты:

const count1 = [
  num => (('' + num).match(/1/g) || []).length,
  num => num.toString().replace(/[^1]/g, '').length,
  num => `${num}`.split('').filter(d => !~-d).length,
  num => [...String(num)].reduce((s, d) => s + (d == 1), 0),
  num => ''.split.call(num, 1).length - 1,
];

const numbers = [
  23489,
  -11,
  -93481,
  7211231,
  0,
  123.321,
  Infinity,
  NaN,
];

count1.map(f => numbers.filter(n => f(n) === 2)).forEach(n => console.log(n));

Вызов метода компонента из другого метода (в отличие от шаблона) требует явного обращения к экземпляру компонента - вы забыли this перед preventDefaults в методе handleDrop.

Добавляете в массив вопросов свойство, указывающее, что пользователь может ввести собственный ответ. Массив ответов - храните два свойства, предопределённые ответы и пользовательские. В шаблоне, если допускается пользовательский ответ, добавляете соответствующий элемент управления. И ещё нужно будет computed свойство - преобразованный массив ответов, где к предопределённым ответам будет подмешиваться пользовательский.

https://jsfiddle.net/rtv8uyhz/

Возвращайте this из всех методов. Кроме getResult, конечно.

Вызывая метод text, вы затираете содержимое элемента. Чтобы не терять ранее добавленный контент, добавляйте текст в отдельный элемент. Например.