Retrieve an id in a v-for loop in vue.js

I have an array of object call it "articles" that came from an API call and I'm using a v-for loop to display them.

Now, when the user click on one of the article, I would like to retrieve the ID so I can use it to $router.push a query string.

The problem is that, since the articles is an array, I need the right index to retrieve the ID. How can a achieve this ?

Here is sample HTML :

        <article  v-for="(article, index) in articles" v-
        on:click="displayArticle" :index="index">
            <h4>{{ article.title }}</h4>
            <p>{{ article.text }}</p>
        </article>

Here is a sample vue.js code

export default {
data () {
    return {
        articles: []
    }
},
// here I avec a create() that make an API call and push the json in articles.

methods : {
    displayArticle: function() {
    // I don't know ho to retrieve the index 

    // The router part would be something like this
    this.$router.push({ path: '/app/?article_id=', query : {article_id: articleId}}
    }
}

I tried using ref but I just get another array.

Thank you for your help