Although the situation seems straightforward, the reason behind it is not clear to me. I am attempting to create a Vue component for a project with older ES5 code. The Vue library version I am using is 2.6x (I also tried 2.5x).
Here is the Vue component I have:
window.StoragesPage = Vue.extend({
name: MyConsts.COMP_STORAGES_PAGE,
template: '#storages-page-template',
data: function () {
return {
msg: 'aaaaaaaaaa',
instGid: '',
instDomain: ''
};
},
});
This component has the following template:
<script type="x-template" id="storages-page-template">
<div> {{ msg }} </div>
</script>
and it is instantiated like this:
Vue.component(MyConsts.COMP_STORAGES_PAGE, window.StoragesPage);
// Initialize Vue root instance
new Vue({
el: '#my-app'
});
The markup for the Vue root instance looks like this:
<div id="my-app">
<storages-page></storages-page>
</div>
and my constant with the component name is defined as:
...
COMP_STORAGES_PAGE: 'storages-page',
...
However, I am receiving a Vue warning:
vue-2x.js:634 [Vue warn]: Property or method "msg" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. (found in Root)
The questions I have are:
Why am I seeing this warning in the first place?
Why does it mention "found in Root" when the "msg" data item is actually inside my Vue root child component?
Lastly, why am I still able to see the properly rendered page with the expected output "aaaaaa" despite this warning?
PS: I have ensured that only one Vue library is included on the page.