Why does position of x-template section matter for vue templates to work with data?
The reason for this problem is the following:
- Vue tries to render
#app - Vue gets the the template to render from html DOM
- Vue sees that there is a
messagereference, this works - Vue sees that there is a component reference to
my-component, it adds it to the render stack - Vue sees a reference to
secondmsg, and then fails
If it didn't fail it would now continue with rendering my-component
As you already discovered, the following works for the problem:
- don't access secondmsg. Then, the component renders right. Or:
- if you don't use the x-template version but rather use inline-template for the component. Or:
- if you move the script section below the div closing the vue app
The parent Vue is being attached to #app, which includes the x-template. Attaching a Vue to an element tells Vue to use the contents of that element as a template to create the DOM. Since the x-template is in there, and it has an interpolation string in it, the parent Vue tries to do the interpolation, but secondmsg isn't defined in the parent.