vue.js - change text within a button after an event : <p>I'm playing with vue.js for learning purposes consisting of different components, one of them being a classic to do list. For now, everything is within one component.</p>

<p>I want to change the text of a button after it is clicked to hide an element from "hide" to "show" - I'm going about this by setting a text data object and then changing it in a function.</p>

<p>See below:</p>

<pre><code>&lt;div id="app"&gt;
  &lt;ul&gt;
    &lt;li v-for="todo in todos"&gt;
      {{ todo.text }}
    &lt;/li&gt;
  &lt;/ul&gt;

  &lt;input type="text" id="list-input"&gt;
  &lt;input type="submit" id="list-submit" v-on:click="addItem"&gt;
  &lt;span id="error" style="color: red; display: none;"&gt;Please Enter Text&lt;/span&gt;

  &lt;ul&gt;
    &lt;todoitem&gt;&lt;/todoitem&gt;
    &lt;todoitem&gt;&lt;/todoitem&gt;
    &lt;todoitem&gt;&lt;/todoitem&gt;
  &lt;/ul&gt;

  &lt;h2 v-if="seen"&gt;SEEN&lt;/h2&gt;
  &lt;button id="hide-seen" v-on:click="toggleSeen"&gt;{{ button.text }}&lt;/button&gt;
&lt;/div&gt; 

&lt;script type="text/javascript"&gt;
// components
Vue.component('todoitem', {
  template: "&lt;li&gt;Test Item&lt;/li&gt;"
})

// app code
var app = new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'Sample Item 1' },
      { text: 'Sample Item 2' },
      { text: 'Sample Item 3' }
    ],
    button: [
      { text: 'Hide'}
    ],
    seen: true
  },
  methods: {
    addItem: function() {
      let item = document.getElementById("list-input").value;
      let error = document.getElementById("error");
      if (item == "") {
        error.style.display = "block";
      } else {
        app.todos.push({ text: item });
        error.style.display = "none";
      }
    },
    toggleSeen: function() {
      app.seen = false
      app.button.push({ text: 'Show' });
    }
  }
})


&lt;/script&gt;
</code></pre>

<p>Unexpectedly, the button is blank on both hide and show states. Being new to vue, this seems like a strange way to go about doing it. Is changing data in this context bad practice? I don't understand how to fix this, as I have no errors in my console. </p>
