Антон Антон

В описании к правилам описана мотивация, зачем так сделано. Если же она не устраивает - можно отключать, подумав.
Например из раздела Essential я бы ничего не выключал, даже multi-word-component-names. Чаще всего такое встречается для элементов лэйаута. При этом всегда можно изменить имена на TheHeader (для одного лэйаута, и получить козию при нескольких лэйаутах) или MainLayoutHeader и т.п.
А для автоисправляемых правил типа singleline-html-element-content-newline я вообще не понимаю, в чем проблема.

Добавить в оборачивающий элемент стиль с указанием height в вычисленное значение сумм scrollHeight имеющихся элементов и класс с transition: height и overflow: hidden.
Показывать:
добавлять элементы в список
ждать nextTick
пересчитывать height оборачивающего элемента.
Скрывать:
пересчитывать height оборачивающего элемента
ждать событие transitionEnd, в его обработчике убирать элементы из списка.
В принципе, можно, наверное, отображать всегда все элементы и пересчитывать только height у оборачивающего элемента, тут зависит от того, сколько их всего. Если сотни, то, наверное, так лучше не делать. Если немного, то будет меньше кода - не надо менять количество и не надо ждать события завершения перехода.

А вот тут что не понятно? https://vuejs.org/guide/components/v-model.html
нужно в родительском создать переменную, в дочернем model-value и emit. В простейших случаях в дочернем компоненте можно как-то так (синтаксис script setup):

const props = defineProps({ modelValue: Object })
const emit = defineEmits(['update:modelValue'])

const localValue = computed({
  get: () => props.modelValue,
  set: val => { emit('update:modelValue', val) }
})

<CloseIcon class="close-btn" @click.stop="closePopup"/>

ну или

<div class="popup__backdrop" v-if="popup"
        @click.self="closePopup">

Теоретически можно сделать как-то так:

<div id="app">
  <div v-cloak>{{ price }}</div>
  <div class="uncloak">0</div>
</div>

[v-cloak] { display: none }
[v-cloak] + .uncloak { display: block }
.uncloak { display: none }

но скорее всего будет немного моргать в момент переключения. Как-то так: https://codepen.io/FragsterAt/pen/wvXNYax

Почему в заголовке пишешь про удаление обработчика, но при этом говоришь, что обработчик не срабатывает (т.е. не подцепляется)?
Вообще если бы было больше кода или пример на jsfiddle/codepen, оно было бы понятнее, но сейчас чисто визуально моему телепату кажется, что используется options api и при этом mounted и beforeDestroy находятся внутри methods а не на первом уровне (где должны быть хуки жизненного цикла компонента).

UPD: проблема в том, что клик сначала отрабатывает на компоненте, потом на документе и в итоге ничего не происходит. Правильнее всего отключить всплытие в обработчике:

toggle(e){
    e.stopPropagation()
   this.visibelOptions = true
      },

но можно и (например) сделать показ позже:

toggle(e){
    this.$nextTick().then(()=>
   this.visibelOptions = true)
      },

toggle(e){
    setTimeout(()=>
   this.visibelOptions = true, 0)
      },

или добавить проверку на скрытии:

hideSelected(e){
  if (this.$el !== e.target)
          this.visibelOptions = false
      }

Объединить в один компонент (с кастомизацией слотами при необходимости)?
Добавить событие дочернему компоненту и обрабатывать в родительском?

Добавить признак в массив, через телепорт отправлять в контейнер размером 0х0 (чтобы его размер видеть), если не вмещается, если помещается - отправлять обратно.
Ну или вообще рендерить все в контейнере а в нужное место выводить вычисляемое свойство с нужным количеством элементов
Если ширина не меняется, то только один раз можно вывести в контейнер и заполнить данные о ширине в исходном массиве.
Если высота известна и фиксирована, то можно просто ограничить высоту контейнера и сделать overflow: hidden

Вот такое есть: https://quasarframework.github.io/quasar-ui-qwindo...
но много открытых окон роутами не очень удобно делать