Почему не видит данные в компоненте vue.js?

Question

[Dark19]

Запутался я с разбором компонентов vue.js. Хотел сделать простой фильтр по имени и возрасту, создал компонент, чтобы можно было несколько фильтров на странице делать, записал все данные в переменную data и в функции data возвращаю эту переменную. Но выводит ошибки наподобие этой:

spoiler

Property or method "option" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

и не могу понять почему, ведь данные я задекларировал для этого компонента. Где ошибка?

Вот создал codepen: codepen.io/dark19/pen/XRqmWP

Answer 1

[Михаил]

Нельзя размещать text/x-template внутри рутового элемента (к которому вы привязываете инстанс). Вот так правильно.

Answer 2

[Negwereth]

Потому, что Property or method "option" is not defined нигде у вас.

Comments

[Dark19]

так option, как я понимаю, берется как текущий элемент массива options в цикле v-for или не так(его ещё нужно как-то объявить)?
Когда код был не в template и без компонента, то все работало.

Answer 3

[Vladimir S]

объяви шаблон компонента вне блока #app - например перед ним