Why I see Vue warning: “Property or method ”msg“ is not defined on the instance but referenced during render…”

Question

The situation looks dead simple but the reason is absolutely not clear to me. I'm trying to implement one Vue component for a project with legacy code using ES5. Vue library is 2.6x (also tried 2.5x).

I have the following Vue component:

window.StoragesPage = Vue.extend({
  name: MyConsts.COMP_STORAGES_PAGE,

  template: '#storages-page-template',

  data: function () {
    return {
      msg: 'aaaaaaaaaa',
      instGid: '',
      instDomain: ''
    };
  },
});

it has the following template:

<script type="x-template" id="storages-page-template">
    <div> {{ msg  }} </div>
</script>

and it uses the following way of instantiation:

Vue.component(MyConsts.COMP_STORAGES_PAGE, window.StoragesPage);

// Init vue root instance
new Vue({
  el: '#my-app'
});

and a markup for Vue root instance looks like:

<div id="my-app">
    <storages-page></storages-page>
</div>

and my constant with the component name looks like:

...
  COMP_STORAGES_PAGE: 'storages-page',
...

Finally I have this 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://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. (found in Root)

The question are:

Why I see this warning at all?
Why it contains "found in Root", but "msg" data item actually is inside my Vue root child component?
Why after that I see properly rendered page with expected output "aaaaaa"?

PS: I also have double-checked that there is only one Vue library included on the page.

@Terry it seems to match the first example shown here ~ vuejs.org/v2/api/#Vue-component — Phil
Looks like I can't prepare minimal reproducible example, I just tried this on Codepen, but see no warnings there, so the reason likely is somewhere in my environment. @Terry I tried your variant, but still see the warning, yes my original variant also works according to Vue docs. — dajnz

dajnz dajnz · Accepted Answer · 2020-03-03T23:07:09

Ok, looks like I found the reason for this weird behavior, after detailed checking Vue instantiation process in Chrome debugger I found that my child Vue component template was rendered inside Vue app container <div> tag like this:

<div id="my-app">
    <storages-page></storages-page>
    <?= $childrenTemplates ?> // <--- this one
</div>

Unfortunately, I skipped this line of code in the description of the question thinking it is not so important. That's why the Vue root component mentioned in the warning. So to fix this I just moved children component templates output below the closing </div> tag:

<div id="my-app">
    <storages-page></storages-page>
</div>
<?= $childrenTemplates ?>

Why I see Vue warning: “Property or method ”msg“ is not defined on the instance but referenced during render…”

1 Answers