VueJS props are undefined in component

Question

I am trying to integrate VueJS with my frontend for my Django applications. I have the following Vue code in a javascript file:

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

And the following code in an HTML file:

            <div class="card-section">
                {% for feed in feeds %}
                {% for post in feed %}
                <div id="post-div">
                    <discuss-post post="{{ post }}"></discuss-post>
                </div>
                {% endfor %}
                {% endfor %}
            </div>

However, when I load my page I get these errors in my console:

What in my code could be causing these errors to be raised?

Answer 1

Correct the </<div> with </div> as stated in the answer from @Leo assuming you have an object "post" in your vue instance

you can bind it like

<discuss-post :post="post"></discuss-post>

your post must be something like

post ={ 
    "by":{
         "profile":
          {
           "img_url":"some url"
          }
         },
    "content":"some content" 
     };