用v-if時(shí)報(bào)錯(cuò)說變量未定義

我要弄一個(gè)收藏按鈕，通過click事件來控制collected的值，從而通過v-if根據(jù)collected的值來顯示不同的圖片

//偽代碼

<div class="option collect" @click="collect()">
  <img src="../assets/images/favor_fill.png" v-if="collected">
  <img src="../assets/images/favor2.png" v-else>
  <span>收藏</span>
</div>

date () {
  return {
    collected:false
  }
},
methods: {
  collect:function() {
    this.collected = !this.collected
  }
}

當(dāng)我執(zhí)行上述代碼時(shí)會(huì)有如下報(bào)錯(cuò)：

就是說我collected沒有定義，可是我明明在data里面定義了啊。如果我在created里面定義collected就不會(huì)報(bào)錯(cuò)：

created() {
      this.collected = false
    }

所以我猜v-if在起作用時(shí)data里面的變量其實(shí)還沒有開始定義，所以v-if根本不知道collected是什么。不知道我的猜想正不正確。還有不管collected的值怎么改變顯示的都是v-else那張圖，是不是因?yàn)関-if只判斷一次collected的值？要實(shí)現(xiàn)收藏按鈕的功能這代碼要怎么改呢