The point is this: there is one and the same piece of code. If you use it when connecting Vue as a simple js library (like this <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> ), then everything works fine ( 4 divas are filled in from the array), but if you use the exact same approach when building npm, an error appears (in the browser in the console):

Property or method "posts" is not referenced during render. Make sure that this property is reactive, it can be either

Error swears at the same array. Actually the question: Why does everything work when connecting from CDN ???

Further the code (I will divide the statics / component) HTML + JS

 <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="greed"> <div v-for="post in posts"> <h3>{{ post.title }}</h3> <p>{{ post.intro}}</p> </div> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </html> <style> * { margin: 0; padding: 0;} #greed { display: grid; grid-template-columns: repeat(4, 1fr); } #greed div { display: inline-block; border: 1px black solid; } </style> <script> var app = new Vue({ el: '#greed', data: { posts: [ { id: 1, title: 'title 1', intro: 'intro 1' }, { id: 2, title: 'title 2', intro: 'intro 2' }, { id: 3, title: 'title 3', intro: 'intro 3' }, { id: 4, title: 'title 4', intro: 'intro 4' } ] } }); </script>

But the Vue component (compiled by npm)

 <template> <div id="greed"> <div v-for="post in posts" v-bind:key="post.id"> <h3>{{ post.title }}</h3> <p>{{ post.intro}}</p> </div> </div> </template> <script> import Vue from 'Vue'; export default { name: 'LatestWork' }; // eslint-disable-next-line var app = new Vue({ el: '#greed', data: { posts: [ { id: 1, title: 'title 1', intro: 'intro 1' }, { id: 2, title: 'title 2', intro: 'intro 2' }, { id: 3, title: 'title 3', intro: 'intro 3' }, { id: 4, title: 'title 4', intro: 'intro 4' } ] } }); </script> <style scoped> #content { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; } #content div { display: inline-block; border: 1px black solid; margin: 0.5rem; } </style>

    0