[Vuejs]-Vue-chat-scroll not scrolling to the last message in the list

I have figured out the problem. The v-chat-scroll directive should be on the ul with the class .chat in my case that makes the chats scroll able.
So the following code fixed the problem:

<div>
      <ul class="chat" v-chat-scroll>
          <li 
          v-for="message in messages" 
          :key="message.id"
          :class="message.from == 'a' ?  'message-card-left' : 'message-card-right'"
          >
          <Card class="message-card">
              <template slot="content">
              {{message.message}}
              </template>
              <template class="message-time" slot="footer">
              {{message.time}}
              </template>
          </Card>
          </li>
      </ul>
    </div>