0xD34F

const formTemplate = `<здесь html-код формы>`;

$(document).on('change', 'селектор чекбокса', function() {
  const $el = $(this).closest('селектор формы');
  if (this.checked) {
    $el.after(formTemplate);
  } else {
    $el.nextAll('селектор формы').remove();
  }
});

https://jsfiddle.net/95rmfax3/

@click="testClickGo().restart"

То есть, попробовать вызвать метод вы не догадались. Это печально.

И если уж вы собираетесь анимацию перезапускать, наверное, надо вместо создания новых объектов сохранить ссылку на тот, что был создан при первом запуске.

targets: '.testVal',

Так не надо, используйте ref.

data: () => ({
  anime: null,
}),
mounted() {
  this.anime = this.$anime({
    targets: this.$refs.animeEl,
    translateX: 200,
    delay: 800,
  });
},

<h1 ref="animeEl">hello, world!!</h1>
<button @click="anime.restart()">click me</button>

Очевидно, у каждого объекта с контентом должно быть собственное свойство, которое будет указывать на наличие лайка. Для отображения лайка неплохо бы сделать отдельный компонент. Можно даже с поддержкой v-model.

https://jsfiddle.net/0y6pjgc4/

Собрать новый массив:

const toggle = (arr, id) => arr.map(n => n.id === id ? { ...n, done: !n.done } : n);

Изменить существующий:

const toggle = (arr, id) => (arr.forEach(n => n.id === id && (n.done = !n.done)), arr);

const group = (arr, keyProp, childrenProp) =>
  Object.values(arr.reduce((acc, { [childrenProp]: children, ...n }) => {
    const item = acc[n[keyProp]] = acc[n[keyProp]] || n;

    if (children) {
      children = (item.childItems || []).concat(children);
      item[childrenProp] = group(children, keyProp, childrenProp);
    }

    return acc;
  }, {}));


const grouped = group(products, 'name', 'childItems');

data = first + second
months = set(n['month'] for n in data)
summed = [ { 'month': m, 'stat': sum(n['stat'] for n in data if n['month'] == m) } for m in months ]

switch (true) {
  case one.includes(inp):
    ...
    break;

  case two.includes(inp):
    ...
    break;
}

Но вообще, в подобной хрени необходимости нет. Собираете в объекты пары массив + завернутый в функцию код из соответствующего массиву case'а, полученные объекты кладёте в массив:

const arr = [
  {
    values: [ ... ],
    action: () => { ... },
  },
  {
    values: [ ... ],
    action: () => { ... },
  },
];

И тогда всё сведётся к поиску элемента и вызову метода:

arr.find(n => n.values.includes(inp))?.action();

preg_match_all('~(?<=<p>).+?(?=</p>)~', $str, $match);

$data = array_map(function($n) {
  return explode('-', $n, 2);
}, $match[0]);

str.split('"').filter((n, i) => i & 1)

// или

str.match(/".*?"/g)?.map(n => n.slice(1, -1)) ?? []

// или

Array.from(str.matchAll(/"([^"]*)"/g), n => n[1])

// или

Array.prototype.reduce.call(str, (acc, n) => {
  if (n !== '"') {
    acc[1]?.push(n);
  } else if (acc[1]) {
    acc[0].push(acc[1].join(''));
    acc[1] = null;
  } else {
    acc[1] = [];
  }

  return acc;
}, [ [], null ])[0]

Если происходит перемещение элементов, то счетчик увеличивается на 3, потому что происходит 3 операции с элементами.

А если бы обмен был реализован так:

[ arr[j - 1], arr[j] ] = [ arr[j], arr[j - 1] ];

Или даже так:

swap(arr, j - 1, j); // функция меняет местами элементы, но как именно - вам неизвестно

На сколько бы вы увеличивали счётчик? Не надо 3, пишите 1. Рассматривайте обмен как единую операцию.

email = ''.join(n.text for n in pages)

preg_split('~(?=.{2}$)~', $sum)

делаю все как показано в примере в оф. репозитории

Пример не смотрел, но сильно сомневаюсь в правдивости вашего утверждения.

В документации:

API: Container

Component that contains the draggable elements or components. Each of its children should be wrapped by Draggable component

"Should be" - "должен быть". Должен. То есть, это не рекомендация, а прямое указание. Которое вы проигнорировали:

<Container @drop="$emit('drop', row.id)" :get-child-payload="getChildPayload">
  <div class="row">

Во-первых.

const result = arr1.map((n, i) => {
  const index = Math.min(i * 2, ((arr2.length - 2) / 2 | 0) * 2);
  return `name: ${n} val1: ${arr2[index]} val2: ${arr2[index + 1]}`;
});

result.forEach(alert);

Vue.Draggable

arr.reduce((acc, n, i) => (
  (i && (acc[acc.length - 1].length + !(acc.length & 1) !== 3)) || acc.push([]),
  acc[acc.length - 1].push(n),
  acc
), [])

getBoundingClientRect

с перезагрузкой страницы

Ну тогда можно особо и не церемониться - вешайте на форму обработчик submit, в нём элементы, чьи значения надо исключить, удаляйте (el.remove()) или делайте неактивными (el.disabled = true). Например:

<form @submit="onSubmit">
  <div v-for="(v, k) in formData">
    <div>{{ k }}:</div>
    <div><input v-model="formData[k]" :name="k" :ref="k"></div>
  </div>
  <button>submit</button>
</form>

data: () => ({
  formData: {
    forename: '',
    surname: '',
    email: '',
  },
}),
methods: {
  onSubmit() {
    Object.entries(this.formData).forEach(([ k, v ]) => !v && (this.$refs[k][0].disabled = true));
  },
},

Соберём объект вида { старый_текст: новый_текст }:

const months = Object.fromEntries(Array.from({ length: 12 }, (n, i) => {
  const d = new Date(0, i);
  return [
    d.toLocaleString('en-US', { month: 'long' }),
    d.toLocaleString('ru-RU', { month: 'long' }).replace(/./, m => m.toUpperCase()),
  ];
}));

Выполним замену:

$('.text').text((i, text) => months[text.trim()]);

// или

document.querySelectorAll('.text').forEach(n => {
  n.innerText = months[n.innerText] || n.innerText;
});

// или

for (const n of document.getElementsByClassName('text')) {
  n.textContent = months[n.textContent.trim()] || n.textContent;
}