0xD34F

Сохраняйте значение scrollHeight. И делайте watch на массив элементов - в обработчике вычисляйте разницу между старым и новым значениями scrollHeight, корректируйте соответствующим образом scrollTop. Как-то так.

С кого начнём выбирать элементы: const selector = '.active';.

Выбираем:

const $result = $(selector).nextAll().addBack();

// или

const result = document.querySelectorAll(`${selector}, ${selector} ~ *`);

// или

const result = [];
for (
  let el = document.querySelector(selector);
  el;
  el = el.nextElementSibling
) {
  result.push(el);
}

// или

const el = document.querySelector(selector);
const siblings = el ? [...el.parentNode.children] : [];
const result = siblings.slice(siblings.indexOf(el));

array.map((n, i) => typeof n.id === 'string' ? i : null).filter(n => n !== null)

или

array.reduce((acc, n, i) => (`${n.id}` === n.id && acc.push(i), acc), [])

https://jsfiddle.net/mn0z4fu5/

например (поскольку свой svg вы решили не показывать, взял первый нагугленный)

с помощью lodash

const obj = _.fromPairs(_.map(data, n => [ n.name, n ]));

// или

const obj = _.zipObject(_.map(data, 'name'), data);

на чистом js

const obj = data.reduce((acc, n) => (acc[n.name] = n, acc), {});

// или

const obj = {};
for (const n of data) {
  obj[n.name] = n;
}

str.replace(/\-\d+x\d+/, '')

Вы один и тот же круг добавляете несколько раз. А надо для каждого набора координат создавать отдельный.

Честно говоря, разбираться, где и как вы ошиблись, особого смысла нет. Потому что избранный вами способ... ну, никто так не делает. Координаты рассчитываются не путём какого-то безумного подбора значений, а исходя из длины маятника и угла поворота. Например:

<button onclick="start()" type="button">Start</button>
<button onclick="stop()">Stop</button>
<canvas width="300" height="300"></canvas>

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const coord = { x: canvas.width / 2, y: canvas.height / 3 };
const length = canvas.width / 3;
const angleMax = 120;
const angleMin = 60;
let angleChange = 1;
let angle = 60;
let active = null;

function stop() {
  active = false;
}

function start() {
  active = true;
  draw();
}

function draw() {
  if (!active) {
    return;
  }

  const { x, y } = coord;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.lineWidth = 5;
  ctx.moveTo(x, y);
  const _a = angle * Math.PI / 180;
  ctx.lineTo(x + length * Math.cos(_a), y + length * Math.sin(_a));

  angle += angleChange;
  if (angle === angleMin || angle === angleMax) {
    angleChange *= -1;
  }

  ctx.stroke();

  requestAnimationFrame(draw);
}

Почему так происходит?

Потому что вы используете динамическую передачу данных. Соответственно, переданная строка либо рассматривается как имя свойства текущего компонента, либо является некорректным мусором. Отсюда undefined (свойства нет) и "скрипт вылетит" (из-за мусорного значения параметра не удалось скомпилировать шаблон).

Ну а числа и json, они являются корректными выражениями: число оно и есть число, а json рассматривается как литерал объекта/массива.

Мне необходимо строку передать в url

Передавайте статическое значение, или оберните значение в кавычки.

Неправильно инициализируете. Надо так:

$('select').each(function() {
  $(this).select2({
    minimumResultsForSearch: Infinity,
    dropdownParent: $(this).closest('.card-more'),
  });
});

<img :src="comment.comment_image">

держите

$('.particle').attr('style', figures[randFigure]);

Замените

$(this).prev(value).html(this.value);

на

$(this).prev(value).find('.range-slider__value').html(this.value);

$('select').select2({
  minimumResultsForSearch: Infinity,
  dropdownParent: $('.card-more'),
});

Так:

:nth-child(4n+2),
:nth-child(4n+3) {
  background: red;
}

??

export default {
  data () {
    props: ['a'],
    return {
      qwe: "Привет 2"
    }
  }
}

Это шизофрения какая-то. Наверное, имелось в виду

export default {
  props: ['a'],
  data() {
    return {
      qwe: "Привет 2"
    }
  }
}

Никакие атрибуты трогать в данном случае не надо, да и не нужны они.

Добавляем два свойства в data - возможные значения, и выбранное значение:

data: () => ({
  selectedPercent: null,
  percents: [ 30, 40, 50 ],
  ...
}),

Разметку создаём на основе данных; обработка клика - нужное значение сразу доступно, так что просто выполняем присваивание:

<div v-for="p in percents" @click.prevent="selectedPercent = p">
  ...

Делаем вычисляемое свойство, представляющее заголовок - выбранное значение, а если его нет, подставляем какую-то дефолтную строку:

computed: {
  header() {
    return this.selectedPercent !== null ? this.selectedPercent : 'hello, world!!';
  },
},

Ну и выводим его:

<h1>{{ header }}</h1>

Делать watch на elems. Код создания картинок вынести в метод, который дёргать в mounted и в watcher'е. Как-то так.