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

Question

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

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

var vm = new Vue({
  el: '#demo',
  data: {
    message: "xy",
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    }
  },
   computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
  reverseMessage: function () {
    return this.message.split('').reverse().join('')
  }
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<p> {{ fullName }}</p>
<p>message: {{ reversedMessage }}</p>
</div>