0xD34F

Потому что в методе draw вы полностью очищаете холст перед рисованием объекта, соответственно, увидеть можно только последний. Холст очищать надо один раз - перед тем, как начнёте обходить в цикле объекты для их обновления.

Так:

$('body').html(Array.from({ length: 4 }, (n, i) => `
  <svg width="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle class="border" cx="20" cy="20" r="18"/>
    <circle class="fill" cx="20" cy="20" r="18"/>
    <text x="12" y="25" class="small">0${i + 1}</text>
  </svg>
`));


const $elements = $('.fill');

function animateElem(index) {
  $elements.removeClass('animation').eq(index).addClass('animation');
}

$(document).on('animationend', function(e) {
  $(e.target).removeClass('animation');
  const index = (1 + $elements.index(e.target)) % $elements.length;
  animateElem(index);
});

$(document).on('click', 'svg', function(e) {
  animateElem($elements.index($('.fill', this)));
});

.border {
  fill: transparent;
  stroke: #ccc;
  stroke-width: 2px;
}

.fill {
  fill: transparent;
  stroke: #000;
  stroke-width: 2px;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transform: rotate(-90deg);
  transform-origin: center;
}

.animation {
  animation: spin 2s both linear;
}

@keyframes spin {
  to {
    stroke-dashoffset: 1;
  }
}

??

Внутри каких элементов надо переключать класс, и что это за класс:

const parentSelectors = [ '.maplabels', '#map' ];
const activeClass = 'active';

Вот jquery, как вы и хотели:

$(document).on('click', parentSelectors.map(n => `${n} >`).join(','), e => {
  const index = $(e.currentTarget).index();
  parentSelectors.forEach(n => $(n)
    .children()
    .removeClass(activeClass)
    .eq(index)
    .addClass(activeClass)
  );
});

Или, к чёрту jquery:

const parents = parentSelectors.map(n => document.querySelector(n));

document.addEventListener('click', ({ target: t }) => {
  const parent = parents.find(n => n !== t && n.contains(t));
  if (parent) {
    const index = [...parent.children].findIndex(n => n.contains(t));
    for (const { children } of parents) {
      for (let i = 0; i < children.length; i++) {
        children[i].classList.toggle(activeClass, i === index);
      }
    }
  }
});

Файл, выбираемый через input, сделать свойством компонента, обновлять по событию change:

data: () => ({
  file: null,
  ...

<input type="file" accept="image/*" @change="file = $event.target.files[0]">

В объединённом методе при собирании formData вместо объекта события доставать файл из упомянутого выше свойства:

methods: {
  uploadAndCreate() {
    const data = new FormData;
    data.append('name', 'picture');
    data.append('file', this.file);

    axios.put(... // запрос из uploadImage

    axios.post(... // запрос из create
  },
  ...

Так?

const nestedVal = {
  get(path, root) {
    return path.split('.').reduce((p, c) => p[c], root);
  },
  set(path, root, val) {
    path = path.split('.');
    const key = path.pop();
    nestedVal.get(path.join('.'), root)[key] = val;
  }
};

Далее вот так вот например можно вывести данные самой статьи во vue

v-for="{description,created_at } in articles" ... {{ description }}

А ещё, вы не поверите, можно и иначе:
v-for="a in articles" ... {{ a.description }}
Соответственно, и автор статьи будет доступен как a.author.name (если конечно, вы насчёт структуры данных не обманываете).

Ну или по аналогии с description и created_at делайте, через деструктуризацию (кстати, а кто вам такое посоветовал? - почитали бы вместо этого официальную документацию):
v-for="{ author } in articles"
В это случае author.name будет OK.

Градиентом можно сделать.

При нажатии на svg, event.target присваивается конкретным элементам - картинка внутри svg, текст, фигура итд.

event.target.closest('svg')

Допустим я нашел нужный эл-т, и вижу в console.log нужный атрибут, но если вызвать его напрямую, возвращается undefined

card.getAttribute('stroke')

UPD. Но вообще, вы совсем не в том направлении двигаетесь. Вместо того, чтобы пытаться достучаться до атрибутов, надо работать со стейтом, который определяет их значения. Как-то так:

onClickFuagra = () => {
  this.setState({
    strokeFuagra: '...',
  });
}

onClickFish = () => {
  this.setState({
    strokeFish: '...',
  });
}

<Samy svgXML={fuagra} onClick={this.onClickFuagra}>
  ...
</Samy>
<Samy svgXML={fish} onClick={this.onClickFish}>
  ...
</Samy>

Можно конечно и общий обработчик оставить:

onClick = e => {
  const svg = e.target.closest('svg');

  this.setState({
    [имя свойства зависит от svg, как определить по кому был клик - думайте сами]: '...',
  });
}

<div className="banners" onClick={this.onClick}>
  ...

Ну так и пишите - unix - вместо format:

moment().add(1, 'months').date(10).unix()

Нет у вас в компоненте recepies одноимённого массива, он находится в recipie-list. Очевидно, этот массив надо перенести в recepies (тогда его можно будет обойти с помощью ngfor для создания экземпляров recipies-detail), а в recipie-list передавать его как параметр.

onKeyDown = e => {
  if (e.key === 'Tab') {
    e.preventDefault();

    const
      input = e.target,
      str = input.value,
      currPos = input.selectionStart,
      wordEnd = str.slice(currPos).search(/[^\w]/);

    let pos = str.slice(currPos + wordEnd).search(/[^\s]/);
    if (pos) {
      pos += currPos + wordEnd;
    }
    if (pos === currPos) {
      pos = 0;
    }

    input.setSelectionRange(pos, pos);
  }
}

<input value={this.state.str} onKeyDown={this.onKeyDown} />

https://jsfiddle.net/acvjhxyt/

задайте ему отрицательный z-index

<balancelabel @updbalance="updatebalance"></balancelabel>

А зачем здесь обработчик события? Вы это событие обрабатываете внутри компонента, emit не делаете... Может его, ну не знаю, УБРАТЬ?!

Так?

Вам тут не нужен jquery, если уже используете angular. Добавляете в компонент свойство, которое будет содержать ссылку на выбранный объект и устанавливаете его значение по клику. Добавляете элементам класс, если выбранный объект совпадает с текущим:

<div
  *ngFor="let user of users"
  [class]="active === user ? 'active' : ''"
  (click)="active = user"
>

например

watch срабатывает тогда когда мне не надо

Ну так и включайте наблюдение только тогда, когда вам это нужно. Как это сделать, можете прочесть в документации.

вотчер возвращает оба одинаковых значения

Что естественно - от того, что вы изменили какое-то из свойств объекта, объект не заменит себя своей копией. Хотите, чтобы старое и новое значение были разными - заменяйте объект целиком.

Как извлечь случайный элемент массивоподобного объекта:

const random = arr => arr[Math.random() * arr.length | 0];

Извлекаем:

// одно значение
const randomName = random(arr_names);

// или сразу несколько
const randomNames = Array.from(
  { length: 5 },
  random.bind(null, arr_names)
);

// работать можно не только с массивами, но и,
// например, со строками, NodeList или HTMLCollection
const randomChar = random('abcdefg');
const randomSpan = random(document.querySelectorAll('span'));
const randomImage = random(document.images);

Так?