[Vuejs]-Vuejs – How to pass variable to main js file and then iterate through?

Few alterations are required.

App.vue

<template>
    <div>
        <app-head></app-head>
        <app-post :posts="posts"></app-post>
        <app-foot></app-foot>
    </div>
</template>

<script>
    import Head from './components/Head.vue';
    import Foot from './components/Foot.vue';
    import Post from './components/Post.vue';

    export default {

        components: {
            'app-head': Head,
            'app-post': Post,
            'app-foot': Foot,
        }, 
        data() {
            return {
                posts: [
                    {id: 1, title: 'Hello :)'}
                ]
            }
        }
    }
</script>

If you need to prop the posts list to the component then it has to come from here. Hence, notice data is modified (or inserted).

Post.vue

<template>
    <div class="post" v-for="post in posts" :key="post.id">
        // The post content...
    </div>
</template>

<script>
    export default {
        props: ['posts']
    }
</script>

Notice that v-for should be in the post component.

Let me know if that works for you.