malihu-custom-scrollbar-plugin with vue dynamic contents outside the box

Question

I am trying to use this jquery plugin with vue, I read its bad to include jquery with vue but I can't help it since client specifically demand to use this plugin...

So i did this

import jquery from "@/assets/js/jquery.js";
import malihu from "@/assets/js/mCustomScrollbar.js";

export default {
    name: 'messages',
    methods:{
        bindScrollbar(){

    $("#content").mCustomScrollbar({
          theme:"kb",
        });

        }
    },
    mounted(){
      this.bindScrollbar();
    },
}

This works normally if the contents are static. But if i load the contents dynamically using v-for, the contents are created outside the scrollable box... Btw, i'm using webpack and single file components. Need help

Solution I tried so far:

re-attach the generated content to the container upon change using watch like this but it does not work also:

watch: {
    'contentValue': function(val,oldVal){
        console.log($("#content")); //<-- log shows that dynamic contents are generated outside the mCSB_container...
        var el = $(".contents").detach();
        $(".mCSB_container").append(el); 


        }
    }

Answer 1

Found it, I should have put the bind, on updated(), instead of mounted() since i am loading the data dynamically... no need to watch for it...

updated(){
  this.bindScrollbar();
},