VueJS props are undefined in component : <p>I am trying to integrate VueJS with my frontend for my Django applications. I have the following Vue code in a javascript file:</p>

<pre><code>window.onload = function() {
    Vue.component('discuss-post', {
        props: ['post'],
        template:  `&lt;div class="card"&gt;
                        &lt;div class="grid-x margin-x"&gt;
                            &lt;div class="cell small-4"&gt;
                                &lt;img class="avatar-img" :src="post.by.profile.img_url"&gt;
                                &lt;p style="font-family: Abel;font-size: 24px"&gt;{{ post.by }}&lt;/p&gt;
                            &lt;/&lt;div&gt;
                        &lt;/div&gt;
                        &lt;div class="grid-x margin-x"&gt;
                            &lt;div class="cell small-4"&gt;
                                &lt;p style="font-family: Abel;font-size: 18px"&gt;{{ post.content }}&lt;/p&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;`
    })
    var postDiv = new Vue({
        el: "#post-div"
    })
}
</code></pre>

<p>And the following code in an HTML file:</p>

<pre><code>            &lt;div class="card-section"&gt;
                {% for feed in feeds %}
                {% for post in feed %}
                &lt;div id="post-div"&gt;
                    &lt;discuss-post post="{{ post }}"&gt;&lt;/discuss-post&gt;
                &lt;/div&gt;
                {% endfor %}
                {% endfor %}
            &lt;/div&gt;
</code></pre>

<p>However, when I load my page I get these errors in my console:</p>

<p><a href="https://i.stack.imgur.com/ClIv0.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ClIv0.png" alt="enter image description here"></a></p>

<p>What in my code could be causing these errors to be raised?</p>
