Lỗi không tìm thấy role khi code Vue

Chào mọi người. Lâu lắm không gặp. Mình có bị vướng mắc khi code như sau: Mình có 1 component định nghĩa ở dưới:

<template>
  <div class="content">
    <v-row class="d-flex overflow-auto">
      <v-col cols="12" sm="2" class="align-start">
        <v-sheet class="ma-2 pa-2">
          <v-btn :append-icon="message.role === 'user' ? 'mdi-account' : 'mdi-assistant'">{{ message.role }}</v-btn>
        </v-sheet>
      </v-col>
      <v-col cols="12" sm="10" class="align-self-center">
        <v-sheet class="ma-2 pa-2">
          <pre v-html="message.content" class="preWrap"></pre>
        </v-sheet>
      </v-col>
    </v-row>
  </div>
</template>

<script>
export default {
  name: 'ChatMessage',
  props: ['msg']
}
</script>

<style scoped>
.content {
  flex: 1;
}
.preWrap {
  white-space: pre-wrap;
}
</style>

Nhưng khi biên dịch code và chạy thì báo là không tìm thấy role. Mình code bị sai ở đâu nhỉ?

Nếu cần điều tra thêm thì mình gửi các bạn pull request ở dưới đây:

https://github.com/BlazingRockStorm/gemini-chat-vue/pull/1