I have a crud page, it is only a one file that works for both editing existing content and creating a new one, I am using froala editor on product description. I did the config of the froala, and it works fine when i try to create a new product but it is not working on the editing side also not throwing any error. Here is what i did:

I am using Vue3 for the project, Firstly i defined and imported froala,

data() {
return {
  product: undefined as Product<Populated>,
  froala: {
    instance: null as FroalaTypes.FroalaEditor,
    config: froala.baseConfig
  }
}

},

Then i did the config on mounted hook

mounted() {
   this.froala.instance = FroalaEditor(
     '.froala-editor',
     froala.extendBase({
       events: {
         contentChanged: () => {
           this.product.description = this.froala.instance.html.get()
           this.$forceUpdate()
         }
       }
     })
   )
 },
 unmounted() {
   froala.destroyAllInstances()
 },

When i print out this.froala.instance on console, it prints an empty array But all works fine on create mode What is the problem with this?