用v-if時報錯說變量未定義

我要弄一個收藏按鈕，通過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í)行上述代碼時會有如下報錯：

就是說我collected沒有定義，可是我明明在data里面定義了啊。如果我在created里面定義collected就不會報錯：

created() {
      this.collected = false
    }

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