Богдан Духевич

Вы идете против директивы v-html.
Стоит либо усложнять темплейт (отказываться от v-html), либо вешать обработчик выше по DOM на родительский контейнер и проверять event.target.

С полностью различной версткой? Прям совсем различной? Если так, то создайте отдельный класс через Vue.extend (в котором будут описаны общие вещи, связывающие все эти компоненты) и далее используйте его для создания компонентов с разными темплейтами.

А смысла рендерить компонент в строку с помощью VueJS как-то я не вижу.

Данные в компонент передаются только посредством props. Судя по коду, Вы неплохо так запутались :)

Посмотрите внимательно примеры в документации, там все очень хорошо написано и показано.

Если кратко:
Данные передаются через props. Принимаемые props изначально должны быть прописаны в компоненте.
Весь компонент должен быть описан в импортируемом .vue файле.
Далее он регистрируется глобально через Vue.component('my-header', myheader); (либо локально - способы регистрации компонента есть в документации).
Также должна быть обертка вокруг Ваших my-header и my-footer, например #my-app
Создается рутовый инстанс Vue с el: '#my-app', в котором лежат компоненты.
VueJS находит компоненты внутри #my-app и инициализирует их.
И в самом темплейте, где Вы прописали эти самые компоненты, им нужно передать данные.
Например, если у вас было в компоненте:
props: ['data']
то передавать их нужно как обычный биндинг атрибутов:
<my-footer v-bind:data="posts"></my-footer>

Рекомендую к просмотру курс по vuejs от Laracasts. Там затрагиваются вопросы работы с Laravel, также есть несколько уроков по laravel-mix и его конфигурации. laravel-mix - это обновленная версия elixir, из которой просто убрали Gulp-прослойку и дали возможность нормально кастомайзить конфиг вебпака. По умолчанию из коробки laravel-mix решает 80% самых распространенных задач.

Ну и в целом я как-то не очень понял Вашу проблему. Что значит - прикрутить? Если настроить просто компиляцию vuejs, то она есть уже из коробки. Если же прикрутить vue-роутер и т.п., то это уже руками :)

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

Если же данные статичны, их не очень много и их можно без проблем загрузить сразу на клиент, то и фильтровать можно на клиенте без проблем :)

Есть проблема - коммуникация между компонентами, не находящимися в одном иерархическом древе. Ее решение - это использование экземпляра Vue, как шины, для подписки/вызова событий.

Пример в официальной документации.

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

Но все же бытует мнение (не мое), что острой необходимости во Vuex нет и лишь 1% проектов может его реально потребовать. Однако это не повод от него отказываться, конечно же :)