title: changing a button text dynamically in Vuejs
body: <p>I want to change my button's text if a value is true/false.
  here is my code:</p>
  <pre><code>&lt;button
    class=&quot;btn btn-primary table-button&quot;
    type=&quot;button&quot;
    data-toggle=&quot;collapse&quot;
    :data-target=&quot;`#collapse${row.num}`&quot;
    aria-expanded=&quot;false&quot;
    aria-controls=&quot;collapseExample&quot;
    @click=&quot;expanded = !expanded&quot;
    ref=&quot;tableButtonText&quot;&gt;
       {{ tableButtonText }}
  &lt;/button&gt;
  
  data(){
    return{
      expanded:&quot;&quot;,
      tableButtonText:&quot;&quot;
    }
  },
  watch: {
      expanded() {
        if (this.expanded) {
          this.tableButtonText = &quot;Hide details&quot;;
        } else if (!this.expanded) {
          this.tableButtonText = &quot;View details&quot;;
        }
      }
    },
  
  </code></pre>
  <p>It does change the value of <code>expanded</code> and <code>tableButtonText</code> but the screen doesn't display the button at all. Seems the issue is that html doesn't render <code>{{ tableButtonText }}</code>. What seems to be the issue and how can I fix it?</p>