0xD34F

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

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 randomItem = arr => arr[Math.random() * arr.length | 0];

Извлекаем:

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

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

// работать можно не только с массивами, но и, например, со строками
const randomChar = randomItem('abcdefg');

// и HTMLCollection тоже будет как надо обработана
const randomImage = randomItem(document.images);

Так?

$(elem).closest('.parent').addClass('active_list')

Потому что в jquery ничего такого нет, это свойство элемента. Которое получить можно так:

$('#text-column').prop('scrollHeight')
// или
$('#text-column').get(0).scrollHeight
// или
$('#text-column')[0].scrollHeight

$('.va-city-list').on('click', '.list-city', function() {
  console.log($(this).data('city'));
});

или

$('.list-city').click(e => console.log($(e.target).attr('data-city')));

или

document.querySelector('.va-city-list').addEventListener('click', e => {
  const { city } = e.target.dataset;
  if (city) {
    console.log(city);
  }
});

или

const onClick = e => console.log(e.target.getAttribute('data-city'));
document.querySelectorAll('.list-city').forEach(n => n.addEventListener('click', onClick));

или

for (const n of document.getElementsByClassName('list-city')) {
  n.onclick = onClick;
}

function onClick() {
  console.log(this.attributes['data-city'].value);
}