title: Why can't I change the text in my child component
body: <p>I writed a Single File Components to show something, here is the code</p>
  <pre><code> &lt;template&gt;
      &lt;el-link type=&quot;primary&quot; @click=&quot;test()&quot; &gt;{{this.contentShow}}&lt;/el-link&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
  import moment from 'moment'
  import {Watch, Prop,Component, Vue } from 'vue-property-decorator'
  
  export default class extends Vue{
  
      @Prop({ default: &quot;111&quot; }) private content!: string
      
  
      private contentShow = &quot;11&quot;;
      
      private test(){
          alert(&quot;111&quot;);
      }
  
      @Watch('content')
      private contentChange(value: any) {
          this.contentShow = value;
          console.log(value);
      }
  }
  &lt;/script&gt;
  </code></pre>
  <p>I wanted to change the content of the el-link, but I failed. Here is the code</p>
  <pre><code>&lt;userButton content=&quot;tttteeeessssttt&quot;&gt;&lt;/userButton&gt;
  </code></pre>
  <p>From the website console I can see that the method &quot;contentChange&quot; was not be used.</p>
  <p>By the way, I tried to write like this:</p>
  <pre><code>&lt;el-link type=&quot;primary&quot; @click=&quot;test()&quot; &gt;{{this.content}}&lt;/el-link&gt;
  </code></pre>
  <p>But there is wrong which says</p>
  <blockquote>
  <p>vue.runtime.esm.js:619 [Vue warn]: Property or method &quot;content&quot; is not defined on the instance but referenced during render.</p>
  </blockquote>
  <p>So what's the wrong? How could I change the content of my component?</p>
  <p>Thank you very much.</p>