I"m going to get a favorites button to control the value of collected through the click event, so that v-if can display different pictures according to the value of 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
  }
}

when I execute the above code, there will be the following error:

means that my collected is not defined, but I clearly defined it in data. If I define collected in created, there will be no error:

created() {
      this.collected = false
    }

so I guess the variables in data haven"t actually been defined when v-if works, so v-if has no idea what collected is. I don"t know if my guess is correct. And no matter how the value of collected changes, it always shows the picture of v-else. Is it because v-if only judges the value of collected once? How to change the code to realize the function of favorites button