I'm trying to create a button in my program that toggles on a number of other things and removes itself once it's clicked. The relevant HTML is as follows:

```
<div id="app">
    <button @click="reveal" v-if="!showlists">Start</button>
    <ul v-if="showlists">
    <list v-for="name in chosenNames" v-bind:name="name"></list>
    </ul>
</div>

```

In this, the unordered list should be shown once the variable "showlists" is true and the button should be removed once "showlists" is true. My Vue app looks like this:

```
let app = new Vue({
    el: "#app",
    data: {
        showlists: false,
        chosenNames: [
        { text: "name1" },
        { text: "name2" },
        { text: "name3" },
        ]
    },
    methods: {
        reveal: function() {
            showlists = true;
        }
    }
})

```

Based on this, the "showlists" variable starts as false, and the program works as intended with the button showing and the list hidden. Once the button is clicked, the function runs and showlists is then set to true (I confirmed this in my troubleshooting efforts). However, once this occurs, the DOM does not dynamically update and instead just remains as it was at the start.

Sorry if this is something really basic, I'm very new to Vue and still trying to learn :)

Any and all help would be appreciated.