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

Question

我将UML类图用于java类，但是这次，我正在开发一个使用单个文件组件的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>