Данные в компонент передаются только посредством 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>

Редко попадаются дизайны, где легко все шрифты в em сделать и все четко через пиксельперфект выровнять. Если тз того не требует, размеры шрифтов можно задавать в пикселях, какие-то глобальные отступы и ширины измерять линейкой в фотошопе, далее после того, как все сверстано, подгонять это через Pixel Perfect (Firefox или Chrome).

То есть вы делаете каркас/компоновку элементов, а уж потом выравниваете все. Сразу все пиксель в пиксель делать - больше времени займет.

p.s.: для Firefox есть версия Pixel Perfect 1.8.1 (рабочая без глюков), которая спрятана в версиях плагина Pixel Perfect на addons.mozilla.org.