The method's returned value is not appearing

I have a method that returns one value of array. I would that in HTML file, this tag p has the value of method and update your value. The problem is: HTML doesn't update, why?? If console.log is used, the value appears normally...

HTML

<div id="app">
  <button @click="test($event, 5, 10)">Generic Button</button>

  <!--here, the value doesn't appear-->
  <p style="background-color: blue">Test value: {{returnValueVector()}}</p>
</div>

JS

var app = new Vue({
    el: '#app',
    data: {
        actions: [],
        counter: 0,
    },
    methods: {
        returnValueVector() {
            return this.actions[this.counter]
        },
        test(event, max, min) {
            this.counter++
            this.actions.push(Math.floor(Math.random() * max) + min)
        }
    }
});