Using Rough-Notation in a nuxt-content page

<template>
    <div>
        <nuxt-content :document="page" />
    </div>
</template>



<script>
import { annotate, annotationGroup } from 'rough-notation'

export default {
    mounted(){
    setTimeout(() => {
      
      const elems = this.$el.querySelectorAll('.rough')
      const rArr = []
      
      const arr = [].slice.call(elems).forEach(e => {
        rArr.push(annotate(e))
      })
      
      const g = annotationGroup(rArr)
      g.show()
      
    }, 100)
  },
}
</script>