0xD34F

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

с помощью lodash

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

на чистом js

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

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'е. Как-то так.

держите

UPD. Или, с использованием вашей демки.

const $li = $('ul li').show().slice(8).hide();

$('#loadMore').on('click', function(e) {
  e.preventDefault();
  $li.fadeToggle();
});

Нужны два массива значений - доступных для выбора и выбранных. Пункты select'ов создаются на основе списка доступных значений, в зависимости от присутствия значения в списке выбранных назначаете disabled:

data: () => ({
  items: [...Array(10)].map((n, i) => `item ${i}`),
  selected: Array(4).fill(null),
}),

<select v-for="(s, i) in selected" v-model="selected[i]">
  <option
    v-for="n in items"
    v-text="n"
    :disabled="selected.includes(n)"
  ></option>
</select>

https://jsfiddle.net/2wz6sgxb/

Что делаю не так?

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