Javascript 我们如何为单页vue js组件构建UML类图？

我使用了java类的UML类图，但这次，我正在开发一个使用单个文件组件的web应用程序

我想问的是，我们如何获得这个Vue js组件的类图。手表和电脑怎么样

var vm=new Vue({
el:'演示'，
数据：{
信息：“xy”，
名字：“Foo”，
姓氏：“酒吧”，
全名：“富吧”
},
观察：{
名字：函数（val）{
this.fullName=val+“”+this.lastName
}
},
计算：{
反向消息：函数（）{
返回此.message.split（“”）.reverse（）.join（“”）
}
},
方法：{
反向消息：函数（）{
返回此.message.split（“”）.reverse（）.join（“”）
}
}
})

{{fullName}}

消息：{{reversedMessage}}