title: How to use computed props in Vue.js with TypeScript?
body: <p>There is a lot of documentation how to interact with Vue.js using the JavaScript language and just a little about TypeScript. The question is how do you define <code>computed</code> props in a <code>vue</code> component if it is written in TypeScript?</p>
  <p>According the <a href="https://v2.vuejs.org/v2/guide/computed.html#Basic-Example" rel="nofollow noreferrer">official example</a>, <code>computed</code> is an object with functions which will be cached based on their dependent props.</p>
  <p>Here is an example I made:</p>
  <pre class="lang-js prettyprint-override"><code>import Vue from 'vue';
  import { Component } from &quot;vue-property-decorator&quot;;
  
  @Component({})
  export default class ComputedDemo extends Vue {
      private firstName: string = 'John';
      private lastName: string = 'Doe';
      private computed: object = {
          fullName(): string {
              return `${this.firstName} ${this.lastName}`;
          },
      }
  }
  </code></pre>
  <p>And html:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;
      &lt;h1&gt;Computed props ts demo&lt;/h1&gt;
      &lt;ul&gt;
          &lt;li&gt;First name: {{firstName}}&lt;/li&gt;
          &lt;li&gt;Last name: {{lastName}}&lt;/li&gt;
          &lt;li&gt;Together: {{fullName}}&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The third list item outputs nothing. Can anybody tell me how to define <code>computed</code> in this case, please?</p>