Why can't he see the data in the vue.js component?

Question

JavaScript

Good afternoon! I got confused with parsing vue.js components. I wanted to make a simple filter by name and age, I created a component so that I could do several filters on the page, I wrote all the data into the data variable and return this variable in the data function. But it gives errors like this:

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.

and I can’t understand why, because I declared the data for this component. Where is the mistake, who knows?
I created a codepen here: codepen.io/dark19/pen/XRqmWP

Answer 1

You cannot place text/x-template inside a root element (to which you bind the instance). That's right.

Answer 2

Because Property or method "option" is not defined anywhere for you.

Answer 3

declare the component template outside the #app block - for example, before it