[JavaScript知识库]为什么article改变的评论在console控制台没有出来，Article changed

<template>
    <div>
      
        <input type="text" v-model="article.text">{{ article.text }}</div>
       <div> <input type="text" v-model="comments">{{ comments }}</div>
      <div> <button @click="changeArticleText">点我</button></div>
      <div> <button @click="addComment">加评论</button></div>
      <div> <button @click="clearComments">清评论</button></div>
       
</template>
<script>
export default {
  data() {
    return {
      article: {
        text: 'Vue is awesome!'
      },
      comments: ['Indeed!', 'I agree']
    }
  },
  created() {
    this.$watch('article', () => {
      console.log('Article changed!')
    })

    this.$watch('comments', () => {
      console.log('Comments changed!')
    })
  },
  methods: {
    // 这些方法不会触发侦听器，因为我们只更改了Object/Array的一个property，
    // 不是对象/数组本身
    changeArticleText() {
      this.article.text = 'Vue 3 is awesome'
    },
    addComment() {
      this.comments.push('New comment')
    },

    // 这些方法将触发侦听器，因为我们完全替换了对象/数组
    changeWholeArticle() {
      this.article = { text: 'Vue 3 is awesome' }
    },
    clearComments() {
      this.comments = []
    }
  }
}
//为什么article改变的评论在console控制台没有出来
//console.log('Article changed!')
</script>

 console.log('Comments changed!')
 这段出来了

 data() {
    return {
      article: {
        text: 'Vue is awesome!'
      },
      comments: ['Indeed!', 'I agree']

这段应该如何引用？v-for吗？