r_g_b_a

Внимание! Так делать нельзя и небезопасно, но для пояснения можно.
В computed - нельзя модифицировать данные из data.

Вот вариант с полным присвоением


Ваша ошибка вероятно кроется в понимании реактивности.
Если почитаете документацию, там если не ошибаюсь будет пункт о том, как она работает.
https://ru.vuejs.org/v2/guide/reactivity.html
Например в объектах надо вызывать this.$set... у массивов отслеживаются push, pop... и т.д.

То есть изменение

a=1;
a=2;

Vue видит правильно. А вот:

a = {};
a= {lol:"kek"}

Уже могут быть проблемы.

При каждом нажатии на чекбокс, вью пробегает по массиву todos.
В момент самого первого нажатия он понимает что для массива todos, например объекту 1 вы добавили свойство calc, но значение он не зафикисровал.

Когда вы кликаете на 2 чекбокс, он опять проходить ВЕСЬ массив, и Vue повторно проверяет calc у 1 и уже тогда понимает что значение у него изменилось (calc то уже существует), а у второго он опять его только создает.

$('.link').parents('li').children('a').css('color', '#f00');

Вариант 1
Advanced Custom Fields как раз отлично поможет в данной ситуации. Вы можете создать кастомное поле которое будет выводиться в какой либо части контента поста. В каждом посте в админке будет некий метабокс с полем ввода. Пишете туда код, который вам нужно вывести во фронте и вуаля.

Вариант 2
Если вам удобнее все настраивать не в админке, а писать код в файлах. То можно через functions.php вашей темы прописать подключение скриптов для конкретных постов, ниже пример:

add_action( 'wp', function () {
	if ( is_single( 12 ) ) { //проверка идентификатора поста
		// какой-либо код
	}
} );

Подключить скрипт можно так, если тема родительская:

wp_enqueue_script('newscript', get_template_directory_uri() . '/js/custom_script.js');

и так если дочерняя:

wp_enqueue_script('newscript', get_stylesheet_directory_uri() . '/js/custom_script.js');

Где мне хранить эти файлы и где прописывать путь?

Хранить файлы вы можете как в БД, так и в uploads, а путь хранить в ACF.

Как вариант - сериализуйте json и храните в БД при помощи ACF. А скриптом доставайте json из БД

v-model или sync

Ничего перемещать не надо. Сделайте компонент, и пусть открытым меню может быть только в одном экземпляре.

Создайте класс с полями - значениями фильтров и рендерите результат с учетом всех этих фильтров. Так же в этом классе добавьте методы срабатывающие при переключении фильтров и меняющие значения фильтров в соответствующих полях класса

class FigureFilter {
  size = null;
  color = null;
  shape = null;
  
  constructor(selector) {
    this.allFiguresNode = document.querySelectorAll(selector);
  }

  /**
   * Эти свойства юзать при нажатии на кнопки
   */
  changeSize(size) {
    this.size = size;
    this.#render();
  }

  changeColor(color) {
    this.color = color;
    this.#render();
  }

  changeShape(shape) {
    this.shape = shape;
    this.#render();
  }

  /**
   * Эти не трогать
   */
  #render() {
    [...this.allFiguresNode].forEach(figure => {

      this.#checkFigure(figure, 'size');
      this.#checkFigure(figure, 'color');
      this.#checkFigure(figure, 'shape');
    })
  }
  
  #checkFigure(figure, area) {
    figure.dataset[area] === this[area]
      ? this.#showFigure(figure)
      : this.#hideFigure(figure);
  }
  
  #showFigure(el) {
    el.setAttribute('hidden', true);
  }
  
  #hideFigure(el) {
    el.removeAttribute('hidden');
  }
}

Набросал на скорую руку пример такого класса

Потому что у тебя перерисовывается весь компонент, так как меняется количество, тип или порядок элементов. Помни это, живи с этим, борись с этим, и ненавидь это.

Пробуй скрывать свои дополнительные элементы через v-show, или стилями.

В данном случае используйте v-show (Почему?).

<option
  v-for="(n, i) in options"
  v-text="n"
  v-bind="!i && { disabled: true, value: '' }"
></option>

Вот только не могу понять, в чём смысл отключения option'а, содержимое которого вполне осмысленное? - если пользователь выбрал что-то другое, а потом решил вернуться к первому варианту, то сделать это не удастся. Если вы хотите создать что-то вроде плейсхолдера, то создавайте отключенный option отдельно:

<option disabled value="">выбирай!</option>
<option v-for="n in options">{{ n }}</option>

https://jsfiddle.net/yrjf2nsc/8/

.active {
  background: red;
}

data: () => ({
  val: -Infinity,
  ...
}),
methods: {
  onClick() {
    this.val = Math.min(...this.arr.filter(n => n > this.val));
  },
  ...
},

<div v-for="n in arr" :class="{ active: n <= val }">{{ n }}</div>
<button @click="onClick">click me</button>

Для внешнего цикла можно использовать «пусто» элемент template,
внутренний цикл генерит уже сами div'ы:


fiddle

computed: {
  flatArr() {
    return this.arr
      .flatMap((n, i) => n.map((m, j) => m && ({ gridRowStart: i + 1, gridColumnStart: j + 1 })))
      .filter(Boolean);
  },
},

<div class="grid">
  <div v-for="n in flatArr" class="cell" :style="n"></div>
</div>

Почему в примере не получается создать снимок

Потому что параметры windowWidth и windowHeight в данном случае задавать не нужно. Уберите их и все заработает.

computed: {
  done() {
    return this.todos.filter(n => n.done);
  },
},

<ol v-if="done.length">
  <li v-for="n in done" v-text="n.text"></li>
</ol>