Александр Маджугин

Редактируйте через инпут локальное значение:

const filters = reactive({});

<input v-model="filters.search">

За которым установите наблюдение - там будут ваши debounce и отправка в стор:

watch(
  () => filters.search,
  debounce(search => store.commit('setFilters', { search }), 1500)
);

А чтобы это локальное значение обновлялось при изменениях в сторе, осуществляемых из других мест, также установите наблюдение за стором:

watch(
  store.state.filters,
  val => Object.assign(filters, val), { immediate: true }
);

https://jsfiddle.net/xs40j5o1/

Разница в том, что span не несёт никакого семантического смысла, а p несёт и является параграфом.

Ну а кто то возможно обратит внимание что он действительно не сформулировал вопрос.
И возможно - но это не точно (хотя уточка не даст соврать) кто то даже начнет формулировать вопрос и поймет ответ на него.

Кому мозгов не хватает на составление вопросительного предложения, тому и на осознание ответа вряд ли хватит.
То есть, кривой заголовок - сразу ясно, что автор вопроса является дебилом, на которого не стоит тратить время.

У вас два пути:
1. Изучить Битрикс (и веб-разработку в целом).
2. Заплатить профессионалам, которые уже всё это знают.

По картинке диагностировать проблему мы не можем и объяснять вам направление для решения задачи (выяснить через DevTools что именно создаёт "пустоты" и дальше редактировать либо шаблон компонента, либо стили шаблона сайта), судя по содержанию вопроса, тоже бесполезно.

Фреймворк за счёт внутренних оптимизаций может работать быстрее, чем плохо написанный ванильный код.
Хотя даже это по большей части работает на синтетических примерах.

Самый наивный из них:
Например, вам надо добавить 10 000 узлов в DOM.
Плохо написанный код будет выглядеть как цикл, на каждой итерации которого вы будете обращаться к DOM API, добавляя элемент.
Хорошо написанный код (как и код, который сгенерирует фреймворк, вероятнее всего) в цикле соберёт всё необходимое и по окончании одним запросом к DOM API вставит на страницу.

Ответ - и да и нет.

Обычно классический ЯП - предполагает прямое (директивное) управление процессом.
И качество оптимизации будет сильно зависеть от того как программист проработал весь прямой ход алгоритма.
В том числе работу с I/O и сетью.

Фреймворк - это ограничитель, который очень строго лимитирует присуствие программиста в результирующем
коде. В идеале программист делате только хендлеры. Или лямбды. Как в Inversion of Control.
Это позволяет хорошему фреймворку сильно соптимизировать поток выполнения базируясь
на том что I/O и сеть будут обеспечиваться фреймворком а программист будет вставлять только лямбды.
Кроме сети и ввода-вывода фреймворк может обеспечивать пул объектов (соединения с БД)
и типичные шаблоны обработки ошибок (retry-pattern) перформанс (cirquit-breaker) и
рейт-лимитеры и троттлинг.

Очень хороший программист который в этом разбирается может улучшить использование
фреймворка а иногда и полностью его заменить. Это будет очень медленно в разработке и дорого в оплате.

Но мы исходим из предположения что 80% программистов - середнячки и звезд с неба не хватают.
Поэтому для них фреймворк - является предпочтительной методикой. И код с фреймворком
скорее всего будет быстрее чем при прямом кодировании на той-же выборке кодеров-середнячков.

Внутри фреймворка, за счёт эффекта масштаба, могут быть реализованы оптимальные алгоритмы и применены какие-то оптимизации, ухудшающие читаемость кода, но ускоряющие его, которых может не быть в том ванильном коде, который напишете вы. Но, конечно, это редкий сценарий и в общем случае код без фреймворка будет работать быстрее или так же (Svelte).

Turqut Məcidli, https://codepen.io/team/css-tricks/pen/qxrZwW

Вам нужно сначала разобраться с самим докером. Тогда вам станет понятно что, куда и зачем.
Рекомендую почитать "Использование Docker" Эдриен Моуэт от O'Reilly.