Why is the title not displayed when clicking on the element?

Question

JavaScript

There is a list that is displayed using vue

<ul id="app">
    <li v-for="item in items">
            <p class="post" id="p1">{{ item.title }}</p>
            <p>{{ item.subtitle }}</p>
           <p>{{ item.datePostCreate }}</p>
           <p>{{ item.text }}</p>
      </li>
</ul>

There is a function that should display the contents of the p tag in alert, that is, the item.title title:

$(".post").click(function(){
                alert($(this).text());
});

Initially, there are several posts on the page, and you need to find out which post was clicked on.
Why isn't the title displayed? Please, help)

Answer 1

Example
PS: never worked with Vue at all, all info from the VueJS events manual