Errors using bundled component

[Tomás Ruiz]

Hello!

I'm using bili to bundle a typescript vue component. I've bundled it but its behavior is not the expected and it's throwing these warnings when it renders:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "messages"
[Vue warn]: $attrs is readonly.

I'm installing the library just like that:

src/plugins/vue-simplet-chat.js

import Vue from 'vue'
import Chat from 'vue-simple-chat'

Vue.use(Chat)

And then importing it in my main.js file like the other external components: import './plugins/vue-simple-chat.js'

On the other hand, I'm running this command to generate the bundle:

yarn bili --format umd,cjs,iife,esm --module-name VueSimpleChat

bili.config.ts

module.exports = {
  output: {
    extractCSS: false,
  },
  input: 'src/index.ts',
  plugins: {
    vue: {
      css:false
    }
  }
}

The entry point is the src/index.ts file:

src/index.ts

import Chat from './Chat.vue'

export default {
 install(Vue: any, options: any) {
  Vue.component("vue-simple-chat", Chat);
 }
}

AFAIK, those errors appear when are multiple vue instances. Am I doing something wrong in my build step or when I import the component in a project?

Thank you in advance! 😅