Error while rendering component

Question

The browser page is empty and the following error appears in the console:

Failed to resolve directive: ref

After commenting and uncommenting various parts of my code, I discovered that the page only works right when I comment on this line:

<h3>{{ status }}</h3>

I am using Vue.js 2. This status is computed:

computed: {
    status: function(){
        var count = 0;
        var lista = this.$refs.listaComponent;
        for(var i in lista.contas){
            if (!lista.contas[i].pago) {
                count++;
            }
        }
        return !count ? "Nenhuma conta a pagar." : "Existem " + count + " contas a pagar.";
    }
},

My HTML has this line:

<lista-component v-ref:lista-component></lista-component>

Answer 1

Guilherme, I wanted to write as a comment my doubt but I have no points for this.. rs

Anyway, how did you declare this component? Did you remember to instantiate your Vue obj? You can send a link from Jsfiddle?

In the component statement, you need to instantiate your Vue obj, more or less like this:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Answer 2

In Vue.js 2.0 the directive v-ref turned into just ref, in accordance with the documentation.

This is the right way:

<lista-component ref="lista-component"></lista-component>